/****************************************************** * 1) CSS VARIABLES FOR THEME AND RESPONSIVENESS ******************************************************/:root {  /* GREY SCALE */  --grey-100: #f8f9fa;  --grey-200: #ececec;  --grey-300: #dee2e6;  --grey-400: #c0c4c8;  --grey-500: #adb5bd;  --grey-600: #6c757d;  --grey-700: #495057;  --grey-800: #343a40;  --grey-900: #212529;  /* WHITE & BLACK */  --white: #ffffff;  --black: #000000;  /* ACCENT COLOR */  --accent: #91c13f;--accent-green:#84AC40;  /* THEME VARIABLES */  --bg-primary: var(--white);  --bg-secondary: var(--grey-100);  --text-primary: var(--grey-900);  --text-secondary: var(--grey-700);  /* GRADIENTS */  --glass-gradient-light: linear-gradient(    135deg,    rgba(255, 255, 255, 0.8) 0%,    rgba(220, 220, 220, 0.5) 100%  );  --glass-gradient: var(--glass-gradient-light);  --accent-gradient: linear-gradient(    90deg,    #91c13f 0%,    #b5e672 100%  );  /* Legacy variable mapping */  --color-background: var(--bg-primary);  --color-text-primary: var(--text-primary);  --color-text-secondary: var(--text-secondary);  --color-card: var(--bg-secondary);  --accent-1: var(--accent);  --accent-2: var(--accent);  --accent-3: var(--accent);  --accent-4: var(--accent);  --accent-5: var(--accent);  --accent-6: var(--accent);  --accent-7: var(--accent);  --accent-8: var(--accent);  --accent-9: var(--accent);  --primary-color: var(--accent);  --primary-hover: var(--accent);  --secondary-color: var(--accent);  --secondary-hover: var(--accent);  --background-color: var(--bg-primary);  --white-color: var(--white);  --light-gray: var(--grey-200);  --gray-color: var(--grey-400);  --dark-gray: var(--grey-700);  --shadow-color: rgba(0, 0, 0, 0.1);  --modal-overlay: rgba(0, 0, 0, 0.6);    /* Fonts */  --font-family: 'Poppins', Arial, sans-serif;  --font-size-base: 16px;  --font-size-sm: 14px;  --font-size-xs: 12px;    /* Spacing */  --spacing-xs: 4px;  --spacing-sm: 8px;  --spacing-md: 16px;  --spacing-lg: 24px;  --spacing-xl: 32px;    /* Breakpoints */  --breakpoint-sm: 480px;  --breakpoint-md: 768px;  --breakpoint-lg: 1024px;  --breakpoint-xl: 1200px;}/* Dark mode overrides */[data-theme="dark"] {  --bg-primary: var(--grey-900);  --bg-secondary: var(--grey-800);  --text-primary: var(--grey-100);  --text-secondary: var(--grey-300);  --glass-gradient-light: linear-gradient(    135deg,    rgba(50, 50, 50, 0.6) 0%,    rgba(30, 30, 30, 0.4) 100%  );}/* -------------------------------------------------------------------------- *//*  Glass card and accent button styles                                       *//* -------------------------------------------------------------------------- */.glass-card {  background: var(--glass-gradient);  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.18);  backdrop-filter: blur(10px);  -webkit-backdrop-filter: blur(10px);  border-radius: 1.25rem;  border: 1px solid rgba(255, 255, 255, 0.25);  padding: 2rem;}.button-accent {  background: var(--accent-gradient);  color: var(--white);  border: none;  border-radius: 1.25rem;  box-shadow: 0 2px 8px 0 rgba(145, 193, 63, 0.1);  padding: 0.75rem 1.5rem;  font-weight: bold;  transition: background 0.2s, box-shadow 0.2s;}.button-accent:hover,.button-accent:focus {  background: #91c13f;  box-shadow: 0 4px 16px 0 rgba(145, 193, 63, 0.25);}.card {  background-color: var(--color-card);  border-radius: 8px;  padding: 1rem;}section.highlight {  border-left: 4px solid var(--accent-4);}.subtitle {  color: var(--accent-5);}.tag {  display: inline-block;  padding: 0.25em 0.5em;  border-radius: 4px;  background-color: var(--accent-6);  color: var(--text-primary);}.tag.info {  background-color: var(--accent-7);}.tag.success {  background-color: var(--accent-8);}.tag.warning {  background-color: var(--accent-9);}/***************************************************** * 2) RESET & GLOBAL STYLES ******************************************************/*,*::before,*::after {  margin: 0;  padding: 0;  box-sizing: border-box;}html {  scroll-behavior: smooth;  font-size: var(--font-size-base);}@media (prefers-reduced-motion: reduce) {  * {    animation-duration: 0.01ms !important;    animation-iteration-count: 1 !important;    transition-duration: 0.01ms !important;    scroll-behavior: auto !important;  }}body {  background-color: var(--bg-primary);  color: var(--text-primary);  font-family: var(--font-family);  line-height: 1.6;  transition: background-color 0.3s ease, color 0.3s ease;  overflow-x: hidden;}/* Global link styling */a {  color: var(--accent-1);  text-decoration: none;  transition: color 0.2s ease;}a:hover,a:focus {  color: var(--accent-3);  text-decoration: none;}/****************************************************** * 3) HEADER NAVBAR ******************************************************/.navbar {  background-color: var(--white-color);  box-shadow: 0 4px 8px var(--shadow-color);  position: relative;  z-index: 1000;}/****************************************************** * 4) TOPBAR STYLES ******************************************************/.topbar {  display: flex;  justify-content: space-between;  align-items: center;  padding: var(--spacing-sm) var(--spacing-md);  background-color: var(--white-color);}/* Sticky on mobile only */@media (max-width: var(--breakpoint-md)) {  .topbar {    position: sticky;    top: 0;    z-index: 999;  }}/****************************************************** * 5) LOGO STYLES ******************************************************/.logo {  width: 50px;  height: auto;  display: block;}/****************************************************** * 6) LOGIN DROPDOWN STYLES ******************************************************/.login-dropdown {  position: relative;  display: inline-block;}.login-button {  background: none;  border: none;  font: inherit;  cursor: pointer;  color: var(--secondary-color);  font-size: 0.9rem;  display: flex;  align-items: center;  gap: var(--spacing-xs);  transition: color 0.2s ease;}.login-button:hover,.login-button:focus {  color: var(--secondary-hover);}.login-button i {  font-size: 1.2rem;}.chevron-icon {  font-size: 0.7rem;  transition: transform 0.3s ease;}.login-drop-menu {  display: none;  position: absolute;  top: calc(100% + var(--spacing-xs));  right: 0;  background: var(--white-color);  border: 1px solid var(--gray-color);  border-radius: 5px;  box-shadow: 0 2px 8px rgba(0,0,0,0.15);  min-width: 160px;  z-index: 1001;  list-style: none;  padding: var(--spacing-xs) 0;  opacity: 0;  visibility: hidden;  transition: opacity 0.3s ease, visibility 0.3s ease;}.login-drop-menu.show {  display: block;  opacity: 1;  visibility: visible;}.login-drop-menu li a {  display: block;  padding: var(--spacing-xs) var(--spacing-md);  color: var(--secondary-color);  transition: background-color 0.2s ease;}.login-drop-menu li a:hover,.login-drop-menu li a:focus {  background-color: var(--light-gray);  color: var(--secondary-hover);}/****************************************************** * 7) DESKTOP MENU STYLES ******************************************************/.desktop-menu {  display: flex;  justify-content: center;  align-items: center;  background-color: var(--white-color);  padding: var(--spacing-xs) var(--spacing-md);}.desktop-menu ul {  list-style: none;  display: flex;  gap: var(--spacing-lg);}.desktop-menu ul li a {  color: var(--secondary-color);  font-size: 0.875rem;  font-weight: 550;  padding: var(--spacing-xs) var(--spacing-xs);  border-radius: 5px;  transition: background-color 0.3s ease, color 0.3s ease;}.desktop-menu ul li a:hover,.desktop-menu ul li a:focus {  background-color: rgba(159, 201, 91, 0.2);  color: var(--secondary-hover);}/****************************************************** * 8) HAMBURGER MENU STYLES ******************************************************/.hamburger {  display: none;  cursor: pointer;  font-size: 1.5rem;  color: var(--primary-color);  transition: color 0.2s ease;  width: 40px;  height: 40px;  align-items: center;  justify-content: center;  background: none;  border: none;}.hamburger:hover,.hamburger:focus {  color: var(--secondary-hover);}.hamburger-icon {  display: flex;  flex-direction: column;  gap: 5px;}.hamburger-icon .bar {  width: 25px;  height: 3px;  background-color: var(--primary-color);  border-radius: 2px;  transition: all 0.3s ease;}/* Transform hamburger into 'X' when active */.hamburger.active .bar:nth-child(1) {  transform: rotate(45deg) translate(5px, 5px);}.hamburger.active .bar:nth-child(2) {  opacity: 0;}.hamburger.active .bar:nth-child(3) {  transform: rotate(-45deg) translate(5px, -5px);}/* Display hamburger on mobile */@media (max-width: var(--breakpoint-md)) {  .hamburger {    display: flex;  }}/****************************************************** * 9) MOBILE MENU STYLES ******************************************************/.mobile-menu {  position: fixed;  top: 0;  right: 0;  width: 100%; /* Full width for a smoother mobile experience */  /* If you prefer narrower, you can do 80% or 90%, but 100% covers entire screen */  height: 100%;  background: var(--white-color);  z-index: 9999;  box-shadow: -2px 0 8px rgba(0,0,0,0.3);  transform: translateX(100%);  transition: transform 0.3s ease;  overflow-y: auto;  padding-top: var(--spacing-lg);}.mobile-menu.show {  transform: translateX(0);}.mobile-menu ul {  list-style: none;  padding: 0 var(--spacing-md);}.mobile-menu ul li {  border-bottom: 1px solid #eee;}.mobile-menu ul li a {  display: block;  padding: var(--spacing-md) 0;  font-size: 1.125rem;  color: var(--secondary-color);  text-decoration: none;  transition: color 0.2s;}.mobile-menu ul li a:hover,.mobile-menu ul li a:focus {  color: var(--primary-color);}.close-btn {  position: absolute;  top: var(--spacing-md);  right: var(--spacing-md);  background: none;  border: none;  font-size: 1.5rem;  color: var(--secondary-color);  cursor: pointer;  transition: color 0.2s ease;}.close-btn:hover,.close-btn:focus {  color: var(--secondary-hover);}.contact-details {  margin-top: var(--spacing-lg);  font-size: 0.8rem;  color: #666;  padding: 0 var(--spacing-md);}.contact-details a {  color: var(--primary-color);  text-decoration: underline;}@media (min-width: calc(var(--breakpoint-md) + 1px)) {  .mobile-menu {    display: none;  }}@media (max-width: var(--breakpoint-md)) {  .desktop-menu {    display: none;  }}/****************************************************** * 10) VISUALLY HIDDEN CLASS FOR ACCESSIBILITY ******************************************************/.visually-hidden {  position: absolute !important;  height: 1px;   width: 1px;   overflow: hidden;  clip: rect(1px, 1px, 1px, 1px);   white-space: nowrap; }/****************************************************** * 11) TRANSITIONS AND ANIMATIONS (Global Reusables) ******************************************************/.desktop-menu ul li a {  transition: background-color 0.3s ease, color 0.3s ease;}.mobile-menu {  transition: transform 0.3s ease;}.hamburger.active .bar:nth-child(1),.hamburger.active .bar:nth-child(3) {  transition: transform 0.3s ease;}.login-drop-menu {  transition: opacity 0.3s ease, visibility 0.3s ease;}/****************************************************** * 12) MODAL STYLES ******************************************************/.modal-overlay,.cookie-modal-overlay {  position: fixed;  top: 0;  left: 0;  width: 100%;  height: 100%;  background-color: var(--modal-overlay);  display: none;  justify-content: center;  align-items: center;  z-index: 10000;}.modal-overlay.show,.cookie-modal-overlay.show {  display: flex;}.modal,.cookie-modal {  background-color: var(--white-color);  padding: var(--spacing-lg);  border-radius: 8px;  max-width: 500px;  width: 90%;  box-shadow: 0 4px 8px rgba(0,0,0,0.2);  position: relative;}/****************************************************** * 13) COOKIE NOTICE (Enhanced) ******************************************************/.cookie-notice {  position: fixed;  bottom: 0;  left: 50%;  transform: translateX(-50%);  width: 90%;  max-width: 600px;  background-color: var(--light-gray);  padding: var(--spacing-md);  display: flex;  flex-direction: column;  align-items: center;  gap: var(--spacing-sm);  border-top: 1px solid var(--gray-color);  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);  border-radius: 10px 10px 0 0;  color: var(--secondary-color);  z-index: 2000;  transition: opacity 0.3s ease;}.cookie-notice.fade-out {  opacity: 0;}.cookie-notice p {  margin: 0;  text-align: center;  font-size: 0.9rem;}.cookie-notice button {  padding: var(--spacing-xs) var(--spacing-sm);  border: none;  background-color: var(--primary-color);  color: var(--white-color);  cursor: pointer;  border-radius: 5px;  transition: background-color 0.3s, transform 0.3s;  font-size: 0.875rem;}.cookie-notice button:hover,.cookie-notice button:focus {  background-color: var(--primary-hover);  transform: scale(1.05);}/****************************************************** * 14) BANNER ******************************************************/.banner {  background: linear-gradient(135deg, #4f8cff 0%, #25316D 99%, #3a7ae8 100%);  border-radius: 15px;  box-shadow: 0 4px 8px var(--shadow-color);  background-size: 200% 200%;  background-position: 0% 50%;  padding: var(--spacing-lg) var(--spacing-md);  color: var(--white-color);  text-align: left;  position: relative;  overflow: hidden;  animation: slideBackground 10s infinite linear;  gap: var(--spacing-md);  max-width: var(--breakpoint-xl);  margin: 0 auto;}@keyframes slideBackground {  0%   { background-position: 0% 50%; }  50%  { background-position: 100% 50%; }  100% { background-position: 0% 50%; }}.banner::before {  content: '';  position: absolute;  top: 0; left: 0; right: 0; bottom: 0;  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);  opacity: 0;  transition: opacity 0.3s;  pointer-events: none;}.banner:hover::before,.banner:focus-within::before {  animation: magicWandEffect 2s infinite;  opacity: 1;}@keyframes magicWandEffect {  0%, 100% {    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);    opacity: 0.5;  }  50% {    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%);    opacity: 0.7;  }}.banner h2 {  font-size: 2rem;  margin-bottom: var(--spacing-sm);  position: relative;  z-index: 2;}.banner p {  font-size: 1rem;  position: relative;  z-index: 2;}@media (max-width: var(--breakpoint-md)) {  .banner {    text-align: center;    padding: var(--spacing-lg) var(--spacing-sm);  }  .banner h2 {    font-size: 1.5rem;  }  .banner p {    font-size: 0.9rem;  }}/****************************************************** * 15) ICON SECTION ******************************************************/.icon-section {  display: flex;  flex-wrap: wrap;  gap: var(--spacing-lg);  justify-content: center;  padding: var(--spacing-lg) 0;}.icon-container {  display: flex;  flex-direction: column;  align-items: center;}.icon {  display: flex;  align-items: center;  justify-content: center;  width: 60px;  height: 60px;  border: 2px solid var(--gray-color);  border-radius: 10px;  padding: var(--spacing-xs);  background-color: var(--white-color);  color: var(--primary-color);  transition: background-color 0.3s, transform 0.3s;}.icon:hover,.icon:focus-within {  background-color: var(--primary-color);  color: var(--white-color);  transform: scale(1.3);}.icon i {  font-size: 1.875rem;}.icon-label {  margin-top: var(--spacing-xs);  font-size: 0.7rem;  font-weight: 600;  color: var(--secondary-color);}/****************************************************** * 16) SERVICE SECTION ******************************************************//* Removed "display: none;" for mobile to ensure the Service section is visible */.service-section {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  gap: var(--spacing-md);  max-width: var(--breakpoint-xl);  margin: 0 auto;  padding: var(--spacing-lg) var(--spacing-md);}.service-item {  background-color: rgba(255,255,255,0.8);  background-size: cover;  background-position: center;  padding: var(--spacing-md);  border-radius: 10px;  box-shadow: 0 4px 8px var(--shadow-color);  height: 180px;  transition: transform 0.3s, box-shadow 0.3s, background-image 0.3s;  display: flex;  flex-direction: column;  justify-content: space-between;}.service-item:hover,.service-item:focus-within {  animation: smokyEffect 2s infinite;  transform: scale(1.05);  box-shadow: 0 8px 16px rgba(0,0,0,0.2);}@keyframes smokyEffect {  0%, 100% {    background-image: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);    opacity: 0.5;  }  50% {    background-image: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 70%);    opacity: 0.7;  }}.service-item h3 {  color: var(--secondary-color);  margin-bottom: var(--spacing-xs);  font-size: 1rem;}.service-item p {  color: var(--dark-gray);  font-size: 0.875rem;  margin-bottom: var(--spacing-sm);}.go-btn {  background-color: var(--primary-color);  color: var(--white-color);  border: none;  padding: var(--spacing-xs) var(--spacing-sm);  cursor: pointer;  border-radius: 5px;  transition: background-color 0.3s, transform 0.2s;  font-size: 0.875rem;  align-self: flex-start;}.go-btn:hover,.go-btn:focus {  background-color: var(--primary-hover);  transform: scale(1.05);}/****************************************************** * 17) FOOTER ******************************************************/.page-footer {  background-color: var(--light-gray);  color: var(--secondary-color);  padding: var(--spacing-md);  text-align: center;}.footer-info {  display: flex;  flex-wrap: wrap;  justify-content: center;  align-items: center;  gap: var(--spacing-md);  text-align: center;}.footer-links a {  margin: 0 var(--spacing-sm);  color: #1d270c;  transition: color 0.3s ease;  font-size: 0.75rem;}.footer-links a:hover,.footer-links a:focus {  color: var(--primary-color);}.payment-processors {  display: flex;  flex-wrap: wrap;  justify-content: center;  gap: var(--spacing-xs);  margin-top: var(--spacing-xs);}.payment-processors img {  width: 100%;  max-width: 280px;  height: auto;  object-fit: contain;  margin: var(--spacing-xs);}@media (max-width: var(--breakpoint-md)) {  .payment-processors img {    max-width: 100px;  }}/****************************************************** * 18) STATUS INDICATOR ******************************************************/.status-indicator {  position: fixed;  bottom: 15%;  right: 0;  background: linear-gradient(90deg, #7cb342, #91c23d);  color: var(--white-color);  border-radius: 10px 0 0 10px;  box-shadow: -2px 2px 8px rgba(0,0,0,0.2);  display: flex;  flex-direction: column;  align-items: center;  justify-content: center;  padding: var(--spacing-xs);  cursor: pointer;  z-index: 2000;  transition: background 0.3s, transform 0.3s;}.status-indicator:hover,.status-indicator:focus-within {  background: linear-gradient(90deg, #619e34, #7ea52d);  transform: scale(1.05);}.status-content {  display: flex;  flex-direction: column;  align-items: center;  gap: var(--spacing-xs);}.status-icon {  font-size: 10px;  color: var(--white-color);  animation: pulse 2s infinite;}@keyframes pulse {  0%, 100% { opacity: 1; transform: scale(1); }  50%      { opacity: 0.7; transform: scale(1.2); }}.status-text {  font-size: 0.75rem;  font-weight: 500;  writing-mode: vertical-rl;  text-orientation: mixed;}/****************************************************** * 19) VERTICAL COPYRIGHT (Left Side) ******************************************************/.vertical-copyright {  position: fixed;  bottom: 0;  left: 0;  width: 20px;  height: 100%;  display: flex;  align-items: flex-end;  justify-content: center;  z-index: 100;}.vertical-copyright p {  writing-mode: vertical-rl;  transform: rotate(180deg);  white-space: nowrap;  margin: var(--spacing-sm) 0;  padding: var(--spacing-xs);  font-size: 0.625rem;  color: var(--secondary-color);  transition: color 0.3s, font-weight 0.3s;  cursor: pointer;}.vertical-copyright p:hover,.vertical-copyright p:focus {  color: var(--primary-color);  font-weight: bold;}/****************************************************** * 20) BUTTONS (CTA, go-btn, etc.) ******************************************************/.cta-btn,.go-btn {  background-color: #7cac34;  color: var(--white-color);  border: none;  padding: 10px 20px;  display: inline-block;  font-size: 1rem;  margin: var(--spacing-xs) 0;  cursor: pointer;  border-radius: 5px;  transition: background-color 0.3s, transform 0.2s;}.cta-btn:hover,.cta-btn:focus,.go-btn:hover,.go-btn:focus {  background-color: #4f8cff;  transform: scale(1.05);}/****************************************************** * 21) PRODUCTION-READY MODALS ******************************************************/.modal {  display: none;  position: fixed;  inset: 0;  z-index: 3000;  background-color: var(--modal-overlay);  overflow-y: auto;  align-items: center;  justify-content: center;  padding: var(--spacing-lg) var(--spacing-sm);}.modal[aria-hidden="false"] {  display: flex;}.modal-content {  background-color: var(--white-color);  position: relative;  border-radius: 10px;  box-shadow: 0 8px 20px rgba(0,0,0,0.2);  width: 90%;  max-width: 800px;  padding: var(--spacing-lg);  animation: fadeIn 0.3s ease-out;}@keyframes fadeIn {  from { opacity: 0; transform: translateY(-20px); }  to   { opacity: 1; transform: translateY(0); }}.close-btn {  position: absolute;  top: var(--spacing-xs);  right: var(--spacing-xs);  font-size: 1.5rem;  background: none;  border: none;  color: var(--secondary-color);  cursor: pointer;  transition: color 0.2s ease;}.close-btn:hover,.close-btn:focus {  color: var(--secondary-hover);}.modal-logo-image {  width: 100px;  height: auto;  display: block;  margin: var(--spacing-md) auto;}.modal-content img {  max-width: 100%;  height: auto;  object-fit: cover;}/****************************************************** * 22) PRIVACY CONTENT / SIMILAR PAGE STYLES ******************************************************/.privacy-content,.contact-content,.helpdesk-content,.recruitment-privacy-content,.security-letter-content,.cookie-policy-content {  max-width: 800px;  margin: 40px auto;  padding: var(--spacing-md);  background-color: var(--white-color);  border-radius: 10px;  box-shadow: 0 4px 8px var(--shadow-color);  line-height: 1.8;  color: var(--secondary-color);}.privacy-content h1,.privacy-content h2,.privacy-content h3,.contact-content h1,.contact-content h2,.contact-content h3,.helpdesk-content h1,.helpdesk-content h2,.helpdesk-content h3,.recruitment-privacy-content h1,.recruitment-privacy-content h2,.recruitment-privacy-content h3,.security-letter-content h1,.security-letter-content h2,.security-letter-content h3,.cookie-policy-content h1,.cookie-policy-content h2,.cookie-policy-content h3 {  color: var(--primary-color);  margin-bottom: var(--spacing-xs);}.privacy-content p,.contact-content p,.helpdesk-content p,.recruitment-privacy-content p,.security-letter-content p,.cookie-policy-content p {  margin-bottom: var(--spacing-sm);  font-size: 0.875rem;}.privacy-content ul,.privacy-content ol,.contact-content ul,.contact-content ol,.helpdesk-content ul,.helpdesk-content ol,.recruitment-privacy-content ul,.recruitment-privacy-content ol,.security-letter-content ul,.security-letter-content ol,.cookie-policy-content ul,.cookie-policy-content ol {  padding-left: var(--spacing-md);  margin-bottom: var(--spacing-sm);  font-size: 0.875rem;}.privacy-content li,.contact-content li,.helpdesk-content li,.recruitment-privacy-content li,.security-letter-content li,.cookie-policy-content li {  margin-bottom: var(--spacing-xs);  color: var(--dark-gray);}.privacy-content a,.contact-content a,.helpdesk-content a,.recruitment-privacy-content a,.security-letter-content a,.cookie-policy-content a {  color: var(--primary-color);  text-decoration: none;  transition: color 0.2s ease;}.privacy-content a:hover,.privacy-content a:focus,.contact-content a:hover,.contact-content a:focus,.helpdesk-content a:hover,.helpdesk-content a:focus,.recruitment-privacy-content a:hover,.recruitment-privacy-content a:focus,.security-letter-content a:hover,.security-letter-content a:focus,.cookie-policy-content a:hover,.cookie-policy-content a:focus {  color: var(--secondary-hover);  text-decoration: underline;}@media (max-width: var(--breakpoint-md)) {  .privacy-content,  .contact-content,  .helpdesk-content,  .recruitment-privacy-content,  .security-letter-content,  .cookie-policy-content {    margin: var(--spacing-md);    padding: var(--spacing-sm);  }}/****************************************************** * 23) REVIEWS SECTION (Google-Style) ******************************************************/.reviews-section {  max-width: 1200px;  margin: 60px auto;  padding: 0 20px;}.reviews-section h2 {  text-align: center;  margin-bottom: 40px;  color: var(--primary-color);}.review {  display: flex;  align-items: flex-start;  background-color: var(--white-color);  padding: 20px;  border-radius: 10px;  box-shadow: 0 4px 8px var(--shadow-color);  margin-bottom: 20px;}.review img {  width: 60px;  height: 60px;  border-radius: 50%;  object-fit: cover;  margin-right: 20px;}.review-content {  flex: 1;}.review-content .stars {  color: #f4c150;  margin-bottom: 5px;}.review-content .review-text {  margin-bottom: 10px;  color: var(--dark-gray);}.review-content .reviewer-name {  font-weight: bold;  color: var(--secondary-color);}.review-response {  margin-left: 80px;  padding: 15px;  background-color: var(--light-gray);  border-left: 4px solid var(--primary-color);  border-radius: 5px;}.review-response p {  color: var(--dark-gray);}/* Call to Action for Reviews */.cta-reviews {  max-width: 800px;  margin: 40px auto;  text-align: center;  padding: 20px;  background-color: #f2f2f2;  border-radius: 10px;}.cta-reviews h3 {  margin-bottom: 15px;  color: var(--secondary-color);}.cta-reviews p {  margin-bottom: 20px;  color: var(--dark-gray);}.cta-reviews .social-icons {  display: flex;  justify-content: center;  gap: 20px;  margin-bottom: 20px;}.cta-reviews .social-icons a {  color: var(--dark-gray);  font-size: 1.5rem;  transition: color 0.3s;}.cta-reviews .social-icons a:hover {  color: var(--primary-color);}.cta-reviews .review-link {  display: inline-block;  padding: 10px 20px;  background-color: var(--primary-color);  color: var(--white-color);  border-radius: 5px;  text-decoration: none;  transition: background-color 0.3s;}.cta-reviews .review-link:hover {  background-color: var(--primary-hover);}/* Responsive Adjustments */@media (max-width: 768px) {  .review {    flex-direction: column;    align-items: center;    text-align: center;  }  .review-response {    margin-left: 0;    margin-top: 15px;  }}/****************************************************** * 24) CHARTS SECTION ******************************************************/.charts-section {  max-width: 1200px;  margin: 60px auto;  padding: 0 20px;}.charts-section h2 {  text-align: center;  margin-bottom: 40px;  color: var(--primary-color);}.chart-container {  display: flex;  flex-wrap: wrap;  gap: 40px;  justify-content: center;}.chart-item {  width: 400px;  background-color: var(--white-color);  padding: 20px;  border-radius: 10px;  box-shadow: 0 4px 8px var(--shadow-color);}.chart-item canvas {  width: 100% !important;  height: auto !important;}@media (max-width: 768px) {  .chart-item {    width: 100%;  }}/****************************************************** * 25) ABOUT/MISSION/LEADERSHIP (Example Reuse) ******************************************************/.about-section,.mission-section,.leadership-section {  max-width: var(--breakpoint-xl);  margin: 60px auto;  padding: 0 var(--spacing-md);}/* Example .about-container with images and text */.about-container,.mission-container,.leadership-container {  display: flex;  flex-wrap: wrap;  gap: var(--spacing-lg);  align-items: center;  justify-content: center;}.about-image img,.mission-image img,.leader img {  width: 100%;  max-width: 500px;  border-radius: 10px;  box-shadow: 0 4px 8px var(--shadow-color);}.about-text,.mission-text {  flex: 1;  min-width: 280px;}.about-text h3,.mission-text h3 {  color: var(--primary-color);  margin-bottom: var(--spacing-xs);  font-size: 1.125rem;}.about-text p,.mission-text p {  margin-bottom: var(--spacing-sm);  text-align: justify;  line-height: 1.8;  font-size: 0.875rem;}.leadership-section {  background-color: var(--light-gray);  padding: var(--spacing-xl) var(--spacing-md);}.leadership-section h2 {  text-align: center;  margin-bottom: var(--spacing-lg);  color: var(--primary-color);  font-size: 1.75rem;}.leader {  background-color: var(--white-color);  border-radius: 10px;  box-shadow: 0 4px 8px var(--shadow-color);  padding: var(--spacing-md);  text-align: center;  width: 250px;  transition: transform 0.3s, box-shadow 0.3s;}.leader:hover,.leader:focus-within {  transform: translateY(-5px);  box-shadow: 0 8px 16px rgba(0,0,0,0.2);}.leader h4 {  margin-bottom: var(--spacing-xs);  color: var(--secondary-color);  font-size: 1rem;}.leader p {  color: #777;  font-size: 0.9rem;}/****************************************************** * 26) GOVERNANCE / PRODUCTS / OTHER SECTIONS ******************************************************/.governance-section,.products-section,.market-section,.testimonials-section,.future-section,.compliance-section,.contact-section {  max-width: var(--breakpoint-xl);  margin: 60px auto;  padding: 0 var(--spacing-md);}/* Example usage for product items */.products-container {  display: flex;  flex-wrap: wrap;  gap: var(--spacing-md);  justify-content: center;}.product-item {  background-color: var(--white-color);  border-radius: 10px;  box-shadow: 0 4px 8px var(--shadow-color);  padding: var(--spacing-md);  width: 300px;  transition: transform 0.3s, box-shadow 0.3s;}.product-item:hover,.product-item:focus-within {  transform: translateY(-5px);  box-shadow: 0 8px 16px rgba(0,0,0,0.2);}.product-item img {  width: 100%;  height: 150px;  object-fit: contain;  margin-bottom: var(--spacing-xs);}.product-item h3 {  color: var(--primary-color);  margin-bottom: var(--spacing-xs);  font-size: 1.125rem;}.product-item p {  color: var(--dark-gray);  margin-bottom: var(--spacing-sm);  font-size: 0.8rem;  text-align: justify;}/****************************************************** * 27) HIDE/SHOW SECTIONS ON MOBILE ******************************************************//* Removed the rule that hides .service-section on mobile *//****************************************************** * 28) GET STARTED FORM SECTION ******************************************************/.get-started-section {  max-width: var(--breakpoint-xl);  margin: 60px auto;  padding: var(--spacing-lg) var(--spacing-md);  background-color: var(--white-color);  border-radius: 10px;  box-shadow: 0 4px 8px var(--shadow-color);}.get-started-section h2 {  text-align: center;  margin-bottom: var(--spacing-lg);  color: var(--primary-color);  font-size: 1.75rem;}.get-started-form {  max-width: 600px;  margin: 0 auto;}.get-started-form .form-group {  margin-bottom: var(--spacing-md);}.get-started-form label {  display: block;  margin-bottom: var(--spacing-xs);  font-weight: 600;  color: var(--secondary-color);  font-size: 0.9rem;}.get-started-form input,.get-started-form select,.get-started-form textarea {  width: 100%;  padding: var(--spacing-sm);  border: 1px solid var(--gray-color);  border-radius: 5px;  font-family: var(--font-family);  font-size: 0.875rem;  transition: border-color 0.3s ease;}.get-started-form input:focus,.get-started-form select:focus,.get-started-form textarea:focus {  border-color: var(--primary-color);  outline: none;}.get-started-form .required {  color: red;  margin-left: 2px;}.get-started-form button[type="submit"] {  display: block;  width: 100%;  padding: var(--spacing-sm);  background-color: var(--primary-color);  color: var(--white-color);  border: none;  border-radius: 5px;  font-size: 1rem;  cursor: pointer;  transition: background-color 0.3s ease, transform 0.2s ease;}.get-started-form button[type="submit"]:hover,.get-started-form button[type="submit"]:focus {  background-color: var(--primary-hover);  transform: scale(1.02);}@media (max-width: var(--breakpoint-md)) {  .get-started-section {    padding: var(--spacing-md) var(--spacing-sm);  }  .get-started-section h2 {    font-size: 1.5rem;  }  .get-started-form button[type="submit"] {    font-size: 0.95rem;  }}/****************************************************** * 29) SOLUTIONS PAGE SPECIFIC (Optional Examples) ******************************************************/.overview-section {  max-width: var(--breakpoint-xl);  margin: 60px auto;  padding: 0 var(--spacing-md);}.overview-container {  display: flex;  flex-wrap: wrap;  gap: var(--spacing-lg);  align-items: center;  justify-content: center;}.overview-text {  flex: 1;  min-width: 280px;}.overview-text h3 {  color: var(--primary-color);  margin-bottom: var(--spacing-xs);  font-size: 1.125rem;}.overview-text p {  margin-bottom: var(--spacing-sm);  line-height: 1.8;  font-size: 0.875rem;}.overview-image img {  width: 100%;  max-width: 500px;  border-radius: 10px;  box-shadow: 0 4px 8px var(--shadow-color);}/****************************************************** * 30) SUCCESS STORIES SECTION ******************************************************/.success-stories-section {  max-width: var(--breakpoint-xl);  margin: 60px auto;  padding: 0 var(--spacing-md);}.success-stories-section h2 {  text-align: center;  margin-bottom: var(--spacing-lg);  color: var(--primary-color);  font-size: 1.75rem;}.stories-container {  display: flex;  flex-wrap: wrap;  gap: var(--spacing-md);  justify-content: center;}.story-item {  background-color: var(--white-color);  border-radius: 10px;  box-shadow: 0 4px 8px var(--shadow-color);  padding: var(--spacing-md);  width: 300px;  transition: transform 0.3s, box-shadow 0.3s;}.story-item:hover,.story-item:focus-within {  transform: translateY(-5px);  box-shadow: 0 8px 16px rgba(0,0,0,0.2);}.story-item img {  width: 100%;  height: 150px;  object-fit: cover;  border-radius: 10px;  margin-bottom: var(--spacing-xs);}.story-content h3 {  color: var(--primary-color);  margin-bottom: var(--spacing-xs);  font-size: 1.125rem;}.story-content p {  color: var(--dark-gray);  font-size: 0.875rem;  line-height: 1.6;}@media (max-width: var(--breakpoint-md)) {  .overview-container,  .solutions-container,  .solution-details-container,  .stories-container {    flex-direction: column;    align-items: center;    text-align: center;  }  .story-item {    width: 100%;    max-width: 500px;  }}/****************************************************** * 31) VIRTUAL TERMINAL SECTION (Example) ******************************************************/.virtual-terminal {  background-color: var(--primary-color);  padding: var(--spacing-lg) var(--spacing-md);  border-radius: 10px;  margin: var(--spacing-xl) 0;}.virtual-terminal-container {  display: flex;  flex-wrap: wrap;  align-items: center;  justify-content: center;  gap: var(--spacing-lg);  max-width: var(--breakpoint-xl);  margin: 0 auto;}.virtual-terminal-info {  flex: 1;  min-width: 280px;  text-align: left;}.virtual-terminal-info h2 {  color: var(--secondary-color);  font-size: 1.75rem;  margin-bottom: var(--spacing-sm);}.virtual-terminal-info h3 {  color: var(--secondary-color);  font-size: 1.25rem;  margin-bottom: var(--spacing-sm);}.virtual-terminal-info p {  font-size: 0.875rem;  color: var(--secondary-color);  margin-bottom: var(--spacing-md);  line-height: 1.6;}.virtual-terminal-info .cta-btn {  display: inline-block;  background-color: var(--secondary-color);  color: var(--white-color);  padding: var(--spacing-sm) var(--spacing-md);  border-radius: 5px;  text-decoration: none;  font-size: 0.875rem;  transition: background-color 0.3s ease, transform 0.2s ease;}.virtual-terminal-info .cta-btn:hover,.virtual-terminal-info .cta-btn:focus {  background-color: var(--primary-hover);  transform: scale(1.05);}.virtual-terminal-graphic {  flex: 1;  min-width: 280px;  text-align: center;}.virtual-terminal-graphic img {  width: 100%;  max-width: 350px;  height: auto;  border-radius: 10px;  box-shadow: 0 4px 8px var(--shadow-color);}/* QR Code Styling */.qr-code {  padding: 20px;  background-color: var(--white-color);  display: inline-block;  border-radius: 10px;  margin-bottom: 20px;}.qr-code img {  width: 200px;}.qr-code p {  margin-top: 10px;  font-size: 12px;}/****************************************************** * 32) TICKET SUBMISSION PROCESS ******************************************************/.ticket-process {  text-align: center;  padding: var(--spacing-lg) var(--spacing-md);  background-color: var(--white-color);  border-radius: 15px;  box-shadow: 0 4px 8px var(--shadow-color);  gap: var(--spacing-md);  max-width: var(--breakpoint-xl);  margin: 0 auto;}.ticket-process-logo h1 {  font-size: 2.5rem;  font-weight: 700;  color: var(--primary-color);  margin-bottom: var(--spacing-lg);}.ticket-steps {  display: flex;  align-items: center;  justify-content: center;  gap: var(--spacing-md);  flex-wrap: wrap;}.ticket-step {  text-align: center;}.step-circle {  width: 60px;  height: 60px;  background-color: var(--primary-color);  color: var(--white-color);  font-size: 1.5rem;  font-weight: 700;  line-height: 60px;  border-radius: 50%;  margin: 0 auto var(--spacing-sm);}.ticket-step p {  font-size: 1rem;  font-weight: 600;  color: var(--secondary-color);}.step-arrow {  font-size: 2rem;  color: var(--secondary-color);}@media (max-width: 768px) {  .ticket-steps {    flex-direction: column;    gap: var(--spacing-sm);  }  .step-arrow {    display: none;  }  .ticket-step p {    font-size: 0.9rem;  }  .step-circle {    width: 50px;    height: 50px;    font-size: 1.2rem;    line-height: 50px;  }}.ticket-actions {  margin-top: var(--spacing-lg);  display: flex;  justify-content: center;  gap: var(--spacing-md);  margin: 20px 0;}.ticket-btn {  text-decoration: none;  padding: var(--spacing-sm) var(--spacing-md);  font-size: 1rem;  font-weight: 600;  border-radius: 5px;  transition: background-color 0.3s ease, transform 0.2s ease;}.submit-btn {  background-color: var(--primary-color);  color: var(--white-color);}.knowledge-btn {  background-color: var(--secondary-color);  color: var(--white-color);}.ticket-btn:hover,.ticket-btn:focus {  transform: scale(1.05);  box-shadow: 0 4px 6px var(--shadow-color);}.ticket-btn:active {  transform: scale(0.98);}/****************************************************** * 33) QCTO COMPLIANT SECTION ******************************************************/.qcto-compliant {  background-color: #d9f99d;  border-radius: 15px;  box-shadow: var(--shadow-color) 0 4px 8px;  padding: var(--spacing-lg);  display: flex;  justify-content: center;  align-items: center;  margin: 20px;}.qcto-container {  display: flex;  flex-wrap: wrap;  align-items: center;  justify-content: space-between;  gap: var(--spacing-lg);  max-width: var(--breakpoint-xl);}.qcto-text {  flex: 1;  min-width: 280px;  text-align: left;}.qcto-text h1 {  font-size: 2.5rem;  font-weight: 700;  color: red;  margin-bottom: var(--spacing-sm);}.qcto-text .highlight {  color: #000;}.qcto-text .subtitle {  font-size: 1rem;  color: var(--secondary-color);  margin-bottom: var(--spacing-md);}.qcto-features h3 {  font-size: 1.2rem;  font-weight: 600;  margin-bottom: var(--spacing-sm);  color: #000;}.qcto-features ul {  list-style: none;  padding: 0;  margin: 0 0 var(--spacing-md);}.qcto-features ul li {  font-size: 1rem;  margin-bottom: var(--spacing-xs);  color: var(--secondary-color);}.qcto-btn {  display: inline-block;  background-color: var(--secondary-color);  color: #fff;  padding: var(--spacing-sm) var(--spacing-md);  text-decoration: none;  font-size: 1rem;  font-weight: 600;  border-radius: 5px;  transition: background-color 0.3s ease, transform 0.2s ease;}.qcto-btn:hover {  background-color: var(--primary-hover);  transform: scale(1.05);}.qcto-contact p {  margin: var(--spacing-sm) 0;  font-size: 1rem;  color: #000;}.qcto-contact i {  margin-right: var(--spacing-xs);  color: #000;}.qcto-image {  flex: 1;  min-width: 280px;  text-align: center;}.qcto-image img {  max-width: 100%;  border-radius: 10px;  box-shadow: 0 4px 8px rgba(0,0,0,0.2);}@media (max-width: 768px) {  .qcto-container {    flex-direction: column;    text-align: center;  }  .qcto-text {    text-align: center;  }  .qcto-btn {    display: block;    margin: var(--spacing-md) auto;  }}/****************************************************** * 34) SMART STUDENT CARD SECTION ******************************************************/.student-card-section {  padding: var(--spacing-lg);  background-color: var(--light-gray);  gap: var(--spacing-md);  max-width: var(--breakpoint-xl);  margin: 20px auto;  border-radius: 15px;  box-shadow: var(--shadow-color) 0 4px 8px;}.student-card-container {  display: flex;  justify-content: space-between;  align-items: flex-start;  gap: var(--spacing-lg);  flex-wrap: wrap;}.student-card-images {  flex: 1;  text-align: center;}.images-title {  font-size: 1.5rem;  font-weight: 600;  margin-bottom: var(--spacing-md);  color: var(--secondary-color);}.card-images-wrapper {  display: flex;  justify-content: center;  gap: var(--spacing-md);}.card-image img {  width: 100%;  max-width: 200px;  border-radius: 10px;  box-shadow: 0 4px 8px rgba(0,0,0,0.2);}.image-caption {  font-size: 0.9rem;  color: var(--secondary-color);  margin-top: var(--spacing-xs);}.student-card-details {  flex: 1;  text-align: left;}.section-title {  font-size: 2rem;  font-weight: 700;  color: var(--primary-color);  margin-bottom: var(--spacing-sm);}.cta-text {  font-size: 1rem;  color: var(--secondary-color);  margin-bottom: var(--spacing-md);  line-height: 1.5;}.feature-list {  list-style-type: disc;  margin-left: var(--spacing-lg);  margin-bottom: var(--spacing-md);}.feature-list li {  font-size: 1rem;  margin-bottom: var(--spacing-xs);  color: var(--secondary-color);}.special-offer {  background-color: var(--white-color);  padding: var(--spacing-md);  border-radius: 5px;  margin-bottom: var(--spacing-md);}.special-offer h3 {  font-size: 1.2rem;  color: var(--primary-color);  margin-bottom: var(--spacing-sm);}.card-call-to-action {  text-align: left;}.cta-button {  display: inline-block;  background-color: var(--primary-color);  color: #fff;  text-decoration: none;  padding: var(--spacing-sm) var(--spacing-md);  border-radius: 5px;  font-size: 1rem;  font-weight: 600;  transition: background-color 0.3s ease, transform 0.2s ease;}.cta-button:hover {  background-color: var(--primary-hover);  transform: scale(1.05);}@media (max-width: 768px) {  .student-card-container {    flex-direction: column;    text-align: center;  }  .card-images-wrapper {    flex-direction: column;  }}/****************************************************** * 35) PREPAID VOIP SECTION ******************************************************/.prepaid-voip-section {  padding: var(--spacing-lg);  background-color: var(--light-gray);}.voip-container {  display: flex;  justify-content: space-between;  align-items: flex-start;  gap: var(--spacing-lg);  flex-wrap: wrap;}.voip-details {  flex: 1;  text-align: left;}.voip-details .section-title {  font-size: 2rem;  font-weight: 700;  color: var(--secondary-color);  margin-bottom: var(--spacing-sm);}.voip-details .cta-text {  font-size: 1rem;  color: var(--secondary-color);  margin-bottom: var(--spacing-md);  line-height: 1.5;}.voip-details .feature-list {  list-style-type: disc;  margin-left: var(--spacing-lg);  margin-bottom: var(--spacing-md);}.voip-details .feature-list li {  font-size: 1rem;  margin-bottom: var(--spacing-xs);  color: var (--secondary-color);}.voip-details .special-offer {  background-color: var(--white-color);  padding: var(--spacing-md);  border-radius: 5px;  margin-bottom: var(--spacing-md);}.voip-details .special-offer h3 {  font-size: 1.2rem;  color: var(--secondary-color);  margin-bottom: var(--spacing-sm);}.voip-details .highlight {  font-weight: bold;  color: var(--primary-color);}.card-call-to-action {  text-align: left;}.cta-button {  display: inline-block;  background-color: var(--secondary-color);  color: #fff;  text-decoration: none;  padding: var(--spacing-sm) var(--spacing-md);  border-radius: 5px;  font-size: 1rem;  font-weight: 600;  transition: background-color 0.3s ease, transform 0.2s ease;}.cta-button:hover {  background-color: var(--primary-hover);  transform: scale(1.05);}.voip-image {  flex: 1;  text-align: center;}.voip-image img {  width: 100%;  max-width: 400px;  border-radius: 10px;  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);}@media (max-width: 768px) {  .voip-container {    flex-direction: column;    text-align: center;  }}/****************************************************** * 36) SERVICE CHARTER PAGE SPECIFIC STYLES ******************************************************/.service-charter {  background-color: var(--background-color);  padding: var(--spacing-lg) var(--spacing-md);  max-width: var(--breakpoint-xl);  margin: 0 auto;}.service-charter-container {  display: flex;  flex-direction: column;  gap: var(--spacing-lg);}.charter-intro h1 {  font-size: 2.5rem;  color: var(--primary-color);  margin-bottom: var(--spacing-sm);  text-align: center;}.charter-intro p {  font-size: 1rem;  color: var(--secondary-color);  line-height: 1.6;  text-align: center;}.charter-section h2 {  font-size: 1.75rem;  color: var(--primary-color);  margin-bottom: var(--spacing-sm);  border-bottom: 2px solid var(--primary-color);  display: inline-block;}.charter-section p {  font-size: 1rem;  color: var(--secondary-color);  line-height: 1.6;  margin-bottom: var(--spacing-md);}.charter-section ul {  list-style-type: disc;  padding-left: 2rem;  margin-bottom: var(--spacing-md);}.charter-section ul li {  font-size: 1rem;  color: var(--dark-gray);  margin-bottom: var(--spacing-xs);}.support-level h3 {  font-size: 1.25rem;  color: var(--primary-color);  margin-bottom: var(--spacing-xs);}.support-level p {  font-size: 1rem;  color: var(--secondary-color);  line-height: 1.6;  margin-bottom: var(--spacing-sm);}.support-level ul {  list-style-type: circle;  padding-left: 2rem;}.support-level ul li {  font-size: 1rem;  color: var(--dark-gray);  margin-bottom: var(--spacing-xs);}.service-standards h3 {  font-size: 1.25rem;  color: var(--primary-color);  margin-bottom: var(--spacing-xs);}.service-standards ul {  list-style-type: square;  padding-left: 2rem;}.service-standards ul li {  font-size: 1rem;  color: var(--dark-gray);  margin-bottom: var(--spacing-xs);}.charter-section ul a {  color: var(--primary-color);  text-decoration: underline;  transition: color 0.3s ease;}.charter-section ul a:hover,.charter-section ul a:focus {  color: var(--secondary-hover);}@media (max-width: var(--breakpoint-md)) {  .service-charter {    padding: var(--spacing-md) var(--spacing-sm);  }  .charter-intro h1 {    font-size: 2rem;  }  .charter-intro p {    font-size: 0.95rem;  }  .charter-section h2 {    font-size: 1.5rem;  }  .support-level h3,  .service-standards h3 {    font-size: 1.1rem;  }  .charter-section p,  .support-level p,  .service-standards ul li,  .charter-section ul li {    font-size: 0.95rem;  }}/****************************************************** * 37) ACTIVE NAVIGATION LINK HIGHLIGHT ******************************************************/.desktop-menu ul li a.active,.mobile-menu ul li a.active {  color: var(--secondary-hover);  font-weight: 700;  position: relative;}.desktop-menu ul li a.active::after,.mobile-menu ul li a.active::after {  content: '';  position: absolute;  left: 0;  bottom: -5px;  width: 100%;  height: 2px;  background-color: var(--secondary-hover);}/****************************************************** * 38) CLIENT LOGOS (Example) ******************************************************/.client-logos {  padding: 50px 20px;  text-align: center;}.client-logos h2 {  font-size: 2.5em;  margin-bottom: 30px;  letter-spacing: 2px;}/* Grid container for logos */.logo-container {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));  gap: 30px;  justify-items: center;  align-items: center;  padding: 20px;}/* Individual logo container */.logo-item {  width: 165px;  height: 60px;  overflow: hidden;  position: relative;  transition: transform 0.3s ease, filter 0.3s ease;  filter: brightness(0.7);  animation: float 3s ease-in-out infinite;}.logo-item:hover {  transform: scale(1.1);  filter: brightness(1);}/* Ensure the logo images fill their container */.logo-item img {  width: 100%;  height: auto;  display: block;}/* Floating animation */@keyframes float {  0%   { transform: translateY(0); }  50%  { transform: translateY(-10px); }  100% { transform: translateY(0); }}/* Expand button styling */.expand-btn {  background: #fff;  color: #222;  border: none;  padding: 10px 20px;  font-size: 1.1em;  cursor: pointer;  border-radius: 4px;  margin-top: 20px;  transition: background 0.3s ease;}.expand-btn:hover {  background: #ddd;}/****************************************************** * 39) SERVICE CARDS FOR INDEX PAGE ******************************************************/.service-callout {  text-align: center;  margin-bottom: var(--spacing-xl);  padding: var(--spacing-md);  background-color: var(--light-gray);  border-radius: 10px;  border: #000 0px solid;  display: flex;  flex-direction: column;  justify-content: center;  align-items: center;  min-height: 200px; /* Add a minimum height to make vertical centering noticeable */}.service-callout h2 {  color: var(--primary-color);  font-size: 1.8rem;  margin-bottom: var(--spacing-sm);}.solutions-btn {  display: inline-block;  background-color: var(--primary-color);  color: var(--white-color);  padding: var(--spacing-sm) var(--spacing-md);  margin-top: var(--spacing-sm);  border-radius: 5px;  font-weight: 600;  transition: background-color 0.3s, transform 0.2s;}.solutions-btn:hover,.solutions-btn:focus {  background-color: var(--primary-hover);  transform: scale(1.05);}.service-cards-container {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  gap: var(--spacing-lg);  margin-top: var(--spacing-xl);}.service-card {  background-color: var(--white-color);  border-radius: 12px;  box-shadow: 0 6px 12px rgba(0,0,0,0.1);  padding: var(--spacing-lg);  transition: transform 0.3s, box-shadow 0.3s;  display: flex;  flex-direction: column;  position: relative;  overflow: hidden;  z-index: 1;}.service-card::before {  content: '';  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 5px;  background: linear-gradient(90deg, var(--primary-color), #5d8127);  z-index: 2;}.service-card:hover,.service-card:focus-within {  transform: translateY(-10px);  box-shadow: 0 12px 20px rgba(0,0,0,0.15);}.card-icon {  font-size: 2.5rem;  color: var(--primary-color);  margin-bottom: var(--spacing-md);  height: 60px;  display: flex;  align-items: center;}.service-card h3 {  font-size: 1.3rem;  color: var(--secondary-color);  margin-bottom: var(--spacing-sm);  font-weight: 600;}.service-card p {  color: var(--dark-gray);  font-size: 0.9rem;  line-height: 1.5;  margin-bottom: var(--spacing-lg);  flex-grow: 1;}.card-link {  display: flex;  align-items: center;  color: var(--primary-color);  font-weight: 600;  font-size: 0.9rem;  transition: transform 0.2s;}.card-link i {  margin-left: var(--spacing-xs);  transition: transform 0.3s;}.card-link:hover,.card-link:focus {  color: var(--primary-hover);}.card-link:hover i,.card-link:focus i {  transform: translateX(5px);}@media (max-width: 768px) {  .service-cards-container {    grid-template-columns: 1fr;  }    .service-card {    max-width: 100%;  }}/****************************************************** * 40) ABOUT PAGE SPECIFIC STYLES ******************************************************/.about-hero {  background: linear-gradient(135deg, rgba(147, 195, 59, 0.9), rgba(68, 100, 28, 0.8)), url('../images/about-us/education-hero.webp');  background-size: cover;  background-position: center;  color: white;  text-align: center;  padding: 100px 20px;  margin-bottom: 60px;  border-radius: 0 0 50% 50% / 100px;}.about-hero h1 {  font-size: 3rem;  margin-bottom: 20px;  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);}.about-hero p {  font-size: 1.2rem;  max-width: 800px;  margin: 0 auto;}/* Journey timeline */.journey-timeline {  position: relative;  max-width: 1200px;  margin: 80px auto;  padding: 20px;}.journey-timeline::after {  content: '';  position: absolute;  width: 6px;  background-color: var(--primary-color);  top: 0;  bottom: 0;  left: 50%;  margin-left: -3px;  border-radius: 10px;}.timeline-item {  padding: 10px 40px;  position: relative;  width: 50%;  box-sizing: border-box;  margin-bottom: 30px;}.timeline-item::after {  content: '';  position: absolute;  width: 25px;  height: 25px;  background-color: white;  border: 4px solid var(--primary-color);  top: 15px;  border-radius: 50%;  z-index: 1;}.left {  left: 0;  text-align: right;}.right {  left: 50%;  text-align: left;}.left::after {  right: -13px;}.right::after {  left: -13px;}.timeline-content {  padding: 20px 30px;  background-color: white;  position: relative;  border-radius: 10px;  box-shadow: 0 4px 8px rgba(0,0,0,0.1);}.timeline-content h3 {  color: var(--primary-color);  margin-bottom: 10px;}/* Team cards */.team-grid {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));  gap: 30px;  margin-top: 40px;}.team-card {  background: white;  border-radius: 15px;  overflow: hidden;  box-shadow: 0 10px 20px rgba(0,0,0,0.1);  transition: transform 0.3s, box-shadow 0.3s;}.team-card:hover {  transform: translateY(-10px);  box-shadow: 0 15px 30px rgba(0,0,0,0.15);}.team-image {  height: 280px;  overflow: hidden;}.team-image img {  width: 100%;  height: 100%;  object-fit: cover;  transition: transform 0.5s;}.team-card:hover .team-image img {  transform: scale(1.1);}.team-info {  padding: 25px;  text-align: center;}.team-info h3 {  margin: 0;  font-size: 1.5rem;  color: var(--secondary-color);}.team-info h4 {  color: var(--primary-color);  margin: 5px 0 15px;  font-size: 1rem;}.team-info p {  color: var(--dark-gray);  font-size: 0.9rem;}.team-social {  display: flex;  justify-content: center;  gap: 15px;  margin-top: 20px;}.team-social a {  width: 40px;  height: 40px;  border-radius: 50%;  background: #f5f5f5;  display: flex;  align-items: center;  justify-content: center;  color: var(--primary-color);  transition: all 0.3s;}.team-social a:hover {  background: var(--primary-color);  color: white;}/* Stats section */.impact-stats {  display: flex;  flex-wrap: wrap;  justify-content: space-around;  gap: 20px;  margin: 50px 0;}.stat-card {  background: white;  padding: 30px;  border-radius: 15px;  box-shadow: 0 5px 15px rgba(0,0,0,0.1);  text-align: center;  width: 200px;  position: relative;  overflow: hidden;}.stat-card::before {  content: '';  position: absolute;  left: 0;  top: 0;  height: 5px;  width: 100%;  background: var(--primary-color);}.stat-number {  font-size: 2.5rem;  font-weight: bold;  color: var(--primary-color);  margin-bottom: 10px;  display: block;}.stat-label {  color: var(--secondary-color);  font-size: 1rem;}/* Testimonial slider */.testimonial-slider {  max-width: 800px;  margin: 40px auto;  padding: 0 20px;  position: relative;}.testimonial-slide {  background: white;  padding: 30px;  border-radius: 15px;  box-shadow: 0 5px 30px rgba(0,0,0,0.1);  display: none;  opacity: 0;  transition: opacity 0.5s;}.testimonial-slide.active {  display: block;  opacity: 1;}.testimonial-text {  font-size: 1.1rem;  line-height: 1.8;  color: var(--dark-gray);  font-style: italic;  margin-bottom: 20px;}.testimonial-author {  display: flex;  align-items: center;}.testimonial-author img {  width: 60px;  height: 60px;  border-radius: 50%;  object-fit: cover;  margin-right: 15px;}.author-info h4 {  margin: 0;  color: var(--secondary-color);}.author-info p {  margin: 5px 0 0;  color: var(--primary-color);}.testimonial-nav {  text-align: center;  margin-top: 20px;}.testimonial-dots {  display: flex;  justify-content: center;  gap: 10px;  margin-top: 20px;}.dot {  width: 12px;  height: 12px;  border-radius: 50%;  background-color: #ddd;  cursor: pointer;  transition: background-color 0.3s;}.dot.active {  background-color: var(--primary-color);}/* Vision graphics */.vision-section {  background: linear-gradient(135deg, #f5f5f5, #e0e0e0);  padding: 80px 0;  margin: 60px 0;  position: relative;  overflow: hidden;}.vision-container {  max-width: 1200px;  margin: 0 auto;  display: grid;  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));  gap: 40px;  padding: 0 20px;}.vision-card {  background: white;  border-radius: 15px;  padding: 40px 30px;  text-align: center;  box-shadow: 0 10px 30px rgba(0,0,0,0.1);  position: relative;  z-index: 1;  transition: transform 0.3s;}.vision-card:hover {  transform: translateY(-10px);}.vision-icon {  width: 80px;  height: 80px;  background: rgba(145, 194, 61, 0.1);  border-radius: 50%;  display: flex;  align-items: center;  justify-content: center;  margin: 0 auto 20px;  font-size: 2rem;  color: var(--primary-color);}.vision-card h3 {  color: var(--secondary-color);  margin-bottom: 15px;}.vision-card p {  color: var(--dark-gray);  font-size: 0.9rem;  line-height: 1.7;}/* Shape decorations */.shape {  position: absolute;  opacity: 0.15;}.shape-1 {  top: -50px;  right: 10%;  width: 200px;  height: 200px;  border-radius: 32% 58% 69% 43% / 48% 32% 59% 55%;  background: var(--primary-color);  animation: move 8s ease-in-out infinite;}.shape-2 {  bottom: -80px;  left: 15%;  width: 250px;  height: 250px;  border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;  background: var(--primary-color);  animation: move 9s ease-in-out infinite reverse;}@keyframes move {  0% { transform: translate(0, 0) rotate(0deg); }  50% { transform: translate(20px, 20px) rotate(10deg); }  100% { transform: translate(0, 0) rotate(0deg); }}/* About page media queries */@media (max-width: 768px) {  .about-hero {    padding: 60px 20px;    border-radius: 0 0 25% 25% / 40px;  }    .about-hero h1 {    font-size: 2rem;  }    .journey-timeline::after {    left: 31px;  }    .timeline-item {    width: 100%;    padding-left: 70px;    padding-right: 25px;  }    .timeline-item::after {    left: 18px;  }    .left {    left: 0;    text-align: left;  }    .right {    left: 0;    text-align: left;  }    .stat-card {    width: 100%;    max-width: 200px;  }}/****************************************************** * 39) BREADCRUMB NAVIGATION ******************************************************/.breadcrumbs {  font-size: var(--font-size-sm);  margin: var(--spacing-md) var(--spacing-lg);}.breadcrumbs ol {  list-style: none;  display: flex;  flex-wrap: wrap;}.breadcrumbs li + li::before {  content: "\203A";  padding: 0 0.5em;  color: var(--gray-color);}.breadcrumbs a {  color: var(--dark-gray);}.breadcrumbs a:hover, .breadcrumbs a:focus {  text-decoration: underline;}/* Quick highlights container */.content-container {  max-width: 960px;} * END OF PRODUCTION-READY, MOBILE-ENHANCED STYLESHEET ******************************************************//* ==========================================================================   eduSYMS Home Page Styles   Follows BEM naming convention for better organization   ========================================================================== *//* ==========================================================================  Modern CSS Reset - Essential foundations for consistent rendering  ========================================================================== *//* Box sizing rules */*,*::before,*::after {  box-sizing: border-box;}/* Remove default margin and padding */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center, dl, dt, dd, ol, ul, li,fieldset, form, label, legend, table, caption,tbody, tfoot, thead, tr, th, td, article, aside,canvas, details, embed, figure, figcaption,footer, header, hgroup, menu, nav, output,ruby, section, summary, time, mark, audio, video {  margin: 0;  padding: 0;  border: 0;  font-size: 100%;  vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {  display: block;}/* Set core root defaults */html {  scroll-behavior: smooth;  -webkit-text-size-adjust: 100%;  -ms-text-size-adjust: 100%;  text-size-adjust: 100%;  tab-size: 4;}/* Set core body defaults */body {  min-height: 100vh;  line-height: 1.5;}/* Remove list styles */ol, ul {  list-style: none;}/* Tables */table {  border-collapse: collapse;  border-spacing: 0;}/* Improve default link behavior */a {  text-decoration-skip-ink: auto;}/* Remove all animations and transitions for people who prefer not to see them */@media (prefers-reduced-motion: reduce) {  html:focus-within {   scroll-behavior: auto;  }  *,  *::before,  *::after {   animation-duration: 0.01ms !important;   animation-iteration-count: 1 !important;   transition-duration: 0.01ms !important;   scroll-behavior: auto !important;  }}/* Google Fonts should be imported in the HTML <head> instead of CSS for better performance:   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">*//* ==========================================================================  CSS Custom Properties (Variables)  Centralized design tokens for consistent theming  ========================================================================== */:root {  /* Primary colors */  --primary: var(--accent);  --primary-light: var(--accent);  --primary-dark: var(--accent);  --primary-deeper: var(--accent);  /* Secondary colors */  --secondary-blue: var(--accent);  --secondary-purple: var(--accent);  --secondary-teal: var(--accent);  --secondary-orange: var(--accent);  /* Neutrals */  --off-white: var(--grey-200);  --light-gray: var(--grey-300);  --mid-gray: var(--grey-500);  --dark-gray: var(--grey-700);  /* Gradients */  --gradient-hero: linear-gradient(135deg, var(--primary-deeper) 0%, #1f2937 100%);  --gradient-primary: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);  --gradient-secondary: linear-gradient(90deg, var(--primary) 0%, var(--secondary-blue) 100%);  /* Typography */  --font-main: 'Poppins', sans-serif;  --font-weight-normal: 400;  --font-weight-medium: 500;  --font-weight-semibold: 600;  --font-weight-bold: 700;  --font-weight-extrabold: 800;  --font-weight-black: 900;  /* Spacing */  --spacing-xs: 0.25rem;  /* 4px */  --spacing-sm: 0.5rem;   /* 8px */  --spacing-md: 1rem;     /* 16px */  --spacing-lg: 1.5rem;   /* 24px */  --spacing-xl: 2rem;     /* 32px */  --spacing-2xl: 3rem;    /* 48px */  --spacing-3xl: 4rem;    /* 64px */  /* Border radius */  --radius-sm: 4px;  --radius-md: 8px;  --radius-lg: 16px;  --radius-xl: 20px;  --radius-full: 9999px;  /* Shadows */  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.12);  /* Animation & Transitions */  --transition-fast: 0.2s ease;  --transition-medium: 0.3s ease;  --transition-slow: 0.5s cubic-bezier(0.25, 1, 0.5, 1);  /* Z-index layers */  --z-below: -1;  --z-normal: 1;  --z-above: 10;  --z-modal: 100;  --z-overlay: 1000;  --z-max: 9999;  /* Accessibility */  --focus-ring: 2px solid var(--primary);  --focus-ring-offset: 2px;  --focus-ring-radius: var(--radius-sm);}/* Dark mode overrides */@media (prefers-color-scheme: dark) {  :root {   /* Neutrals dark mode */   --off-white: #121212;   --light-gray: #1e1e1e;   --mid-gray: #6c7280;   --dark-gray: #a9adb8;   --black: #f1f1f1;   /* Adjusted shadows for dark mode */   --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);   --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.25);   --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);   --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.35);   /* Accessibility for dark mode */   --focus-ring: 2px solid var(--primary-light);  }}/* ==========================================================================  Base Styles - Core styling for fundamental elements  ========================================================================== */body {  font-family: var(--font-main);  background: var(--color-background);  color: var(--color-text-primary);  line-height: 1.5;  font-size: 16px;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-rendering: optimizeLegibility;  transition: background-color var(--transition-medium), color var(--transition-medium);  overflow-x: hidden;}/* Media elements - Ensure proper rendering and responsive behavior */img,svg {  display: block;  max-width: 100%;  height: auto;  object-fit: contain;}/* Form elements inherit typography */button,input,textarea,select {  font: inherit;  color: inherit;}/* Base link styling with improved interaction states */a {  color: inherit;  text-decoration: none;  transition: color var(--transition-fast), outline var(--transition-fast);}a:hover {  color: var(--primary);}/* Typography helpers with proper font weights from variables */strong,b {  font-weight: var(--font-weight-bold);}em,i {  font-style: italic;}/* Selection styling for better user feedback */::selection {  background: var(--primary-light);  color: var(--white);  text-shadow: none;}/* Ensure print styles maintain readability */@media print {  body {   background: #fff;   color: #000;  }  a {   color: #000;   text-decoration: underline;  }}/* ==========================================================================  Layout and Container Utilities  Core layout structures and accessibility helpers  ========================================================================== *//* Main container - responsive padding adjustments at different breakpoints */.container {  max-width: 1200px;  width: 100%;  margin-left: auto;  margin-right: auto;  padding-left: var(--spacing-md);  padding-right: var(--spacing-md);  position: relative;}/* Container size variants */.container--narrow {  max-width: 960px;}.container--wide {  max-width: 1400px;}/* Responsive container adjustments */@media (max-width: 768px) {  .container {   padding-left: var(--spacing-sm);   padding-right: var(--spacing-sm);  }}/* Accessibility helper - hide content visually but keep it accessible for screen readers */.visually-hidden {  position: absolute;  width: 1px;  height: 1px;  padding: 0;  margin: -1px;  overflow: hidden;  clip: rect(0, 0, 0, 0);  white-space: nowrap;  border: 0;}/* Layout utilities */.flex {  display: flex;}.flex-column {  flex-direction: column;}.flex-wrap {  flex-wrap: wrap;}.items-center {  align-items: center;}.justify-center {  justify-content: center;}.justify-between {  justify-content: space-between;}.text-center {  text-align: center;}.text-left {  text-align: left;}.text-right {  text-align: right;}/* Gap utilities */.gap-sm {  gap: var(--spacing-sm);}.gap-md {  gap: var(--spacing-md);}.gap-lg {  gap: var(--spacing-lg);}/* ==========================================================================  Accessibility Utilities  Helper classes for improved accessibility and focus management  ========================================================================== *//* Focus styles for interactive elements */a:focus,button:focus,input:focus,select:focus,textarea:focus {  outline: var(--focus-ring);  outline-offset: var(--focus-ring-offset);  border-radius: var(--focus-ring-radius);  transition: outline-offset 0.2s ease;}/* Focus styles for keyboard navigation in modern browsers */a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {  outline: var(--focus-ring);  outline-offset: var(--focus-ring-offset);  box-shadow: 0 0 0 3px rgba(147, 195, 59, 0.25);}/* Remove outline for mouse users in browsers that support :focus-visible */a:focus:not(:focus-visible),button:focus:not(:focus-visible),input:focus:not(:focus-visible),select:focus:not(:focus-visible),textarea:focus:not(:focus-visible) {  outline: none;  box-shadow: none;}/* Class for custom focus indicators on non-interactive elements */.content-focus {  outline: 3px solid var(--primary);  outline-offset: 4px;  position: relative;  z-index: var(--z-above);}/* Print-friendly content utilities */.print-only {  display: none;}@media print {  .print-only {   display: block;  }  .no-print {   display: none !important;  }}/* High contrast mode support */@media (forced-colors: active) {  a:focus,  button:focus,  input:focus,  select:focus,  textarea:focus {   outline: 3px solid HighlightText !important;  }}/* ==========================================================================  Section Component - Base layout container for content sections  ========================================================================== */section {  position: relative;  overflow: hidden;  padding: var(--spacing-3xl) 0;  z-index: 1;}/* Responsive section spacing */@media (max-width: 992px) {  section {   padding: var(--spacing-2xl) 0;  }}@media (max-width: 768px) {  section {   padding: var(--spacing-xl) 0;  }}@media (max-width: 480px) {  section {   padding: var(--spacing-lg) 0;  }}/* Section variations */.section--narrow {  max-width: 1000px;  margin-left: auto;  margin-right: auto;}.section--no-overflow {  overflow: visible;}/* ==========================================================================  Accessibility - Skip Link  Allows keyboard users to bypass navigation and jump to main content  ========================================================================== */.skip-link {  position: absolute;  top: -100px;  left: 0;  background: var(--primary);  color: var(--white);  padding: 12px 20px;  z-index: var(--z-max);  transition: top var(--transition-medium);  border-radius: 0 0 var(--radius-md) 0;  text-decoration: none;  font-weight: var(--font-weight-semibold);  box-shadow: var(--shadow-md);  line-height: 1.5;  font-size: 1rem;  text-align: center;  width: auto;}.skip-link:focus,.skip-link:active {  top: 0;  outline: 3px solid var(--primary-dark);  outline-offset: 2px;}.skip-link:hover {  background: var(--primary-dark);  text-decoration: underline;}/* Ensure skip link is visible in high contrast mode */@media (forced-colors: active) {  .skip-link {   border: 2px solid HighlightText;  }  .skip-link:focus,  .skip-link:active {   outline: 3px solid HighlightText;  }}/* Respect reduced motion preference */@media (prefers-reduced-motion: reduce) {  .skip-link {   transition: none;  }}/* ==========================================================================  Preloader - Initial loading animation that appears before content loads  ========================================================================== */.preloader {  position: fixed;  top: 0;  left: 0;  width: 100%;  height: 100%;  background: var(--white);  display: flex;  justify-content: center;  align-items: center;  z-index: var(--z-max);  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;  will-change: opacity, visibility;}.preloader.fade-out {  opacity: 0;  visibility: hidden;  pointer-events: none;}.loader {  width: 80px;  height: 80px;  position: relative;}/* Responsive loader size for smaller screens */@media (max-width: 480px) {  .loader {   width: 60px;   height: 60px;  }}.loader-spinner {  border: 4px solid rgba(147, 195, 59, 0.2);  border-radius: 50%;  border-top: 4px solid var(--primary);  width: 100%;  height: 100%;  -webkit-animation: spin 1s linear infinite;  animation: spin 1s linear infinite;  will-change: transform;}.loader-logo {  width: 80px;  height: 80px;  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  -webkit-animation: pulse 1.5s ease-in-out infinite;  animation: pulse 1.5s ease-in-out infinite;  will-change: transform, opacity;}@media (max-width: 480px) {  .loader-logo {   width: 60px;   height: 60px;  }}/* Accessible text for screen readers */.preloader .visually-hidden {  position: absolute;  width: 1px;  height: 1px;  padding: 0;  margin: -1px;  overflow: hidden;  clip: rect(0, 0, 0, 0);  white-space: nowrap;  border: 0;}/* Animation keyframes with vendor prefixes */@-webkit-keyframes spin {  0% { -webkit-transform: rotate(0deg); }  100% { -webkit-transform: rotate(360deg); }}@keyframes spin {  0% { transform: rotate(0deg); }  100% { transform: rotate(360deg); }}@-webkit-keyframes pulse {  0%, 100% { opacity: 1; -webkit-transform: translate(-50%, -50%) scale(1); }  50% { opacity: 0.8; -webkit-transform: translate(-50%, -50%) scale(0.95); }}@keyframes pulse {  0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }  50% { opacity: 0.8; transform: translate(-50%, -50%) scale(0.95); }}/* Dark mode support */@media (prefers-color-scheme: dark) {  .preloader {   background: var(--off-white);  }  .loader-spinner {   border-color: rgba(147, 195, 59, 0.1);   border-top-color: var(--primary-light);  }}/* Respect user's motion preferences */@media (prefers-reduced-motion: reduce) {  .loader-spinner,  .loader-logo {   -webkit-animation: none;   animation: none;  }  .preloader {   transition: none;  }  .loader-logo {   opacity: 1;   transform: translate(-50%, -50%) scale(1);  }}/* ==========================================================================  Hero Section - Main landing area with call-to-action elements  Provides the first impression and primary conversion path for visitors  ========================================================================== */.hero {  position: relative;  min-height: 90vh;  display: flex;  align-items: center;  justify-content: center;  background: var(--gradient-hero);  color: var(--white);  padding: 140px 20px 100px;  margin-top: -10px;  text-align: center;  overflow: hidden;  z-index: 1;}.hero__content {  position: relative;  z-index: 5;  max-width: 860px;  margin: 0 auto;  width: 100%;}.hero__title {  font-size: clamp(2.5rem, 5vw, 3.5rem);  font-weight: 800;  line-height: 1.2;  margin-bottom: 20px;  color: var(--white);  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);}.hero__title span {  display: inline-block;  background-image: linear-gradient(90deg, var(--primary-light) 0%, var(--secondary-blue) 100%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;  color: transparent; /* Fallback for browsers that don't support background-clip */  font-weight: 900;}.hero__description {  font-size: clamp(1.1rem, 2vw, 1.3rem);  color: rgba(255, 255, 255, 0.9);  margin-bottom: 32px;  line-height: 1.6;  max-width: 760px;  margin-left: auto;  margin-right: auto;}.hero__badge {  display: inline-block;  background: rgba(147, 195, 59, 0.15);  color: var(--primary-light);  padding: 8px 16px;  border-radius: 50px;  font-weight: 600;  margin-top: 16px;  box-shadow: 0 4px 24px rgba(147, 195, 59, 0.25);}.hero__stats {  display: flex;  flex-wrap: wrap;  justify-content: center;  gap: 24px;  margin: 40px auto;  max-width: 900px;}.hero__stat {  background: rgba(255, 255, 255, 0.1);  -webkit-backdrop-filter: blur(12px);  backdrop-filter: blur(12px);  border: 1px solid rgba(255, 255, 255, 0.15);  border-radius: 16px;  padding: 24px 28px;  min-width: 160px;  text-align: center;  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;  will-change: transform;}.hero__stat:hover {  transform: translateY(-5px);  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);  background: rgba(255, 255, 255, 0.15);}.hero__stat-value {  font-size: 2.3rem;  font-weight: 700;  color: var(--primary-light);  margin-bottom: 5px;  display: block;  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}.hero__stat-label {  font-size: 1rem;  color: rgba(255, 255, 255, 0.85);  font-weight: 500;}.hero__buttons {  margin-top: 34px;  display: flex;  justify-content: center;  gap: 20px;  flex-wrap: wrap;}.hero__button {  position: relative;  display: inline-flex;  align-items: center;  justify-content: center;  gap: 8px;  font-size: 1.1rem;  font-weight: 700;  padding: 14px 32px;  border-radius: 50px;  border: none;  cursor: pointer;  text-decoration: none;  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);  z-index: 1;  overflow: hidden;}/* Primary call-to-action button */.hero__button--primary {  background: var(--primary);  color: var(--white);  box-shadow: 0 8px 25px rgba(147, 195, 59, 0.3);}.hero__button--primary::before {  content: '';  position: absolute;  top: 0;  left: 0;  width: 0;  height: 100%;  background: var(--primary-dark);  transition: width 0.5s ease;  z-index: -1;}.hero__button--primary:hover {  box-shadow: 0 12px 30px rgba(147, 195, 59, 0.4);  transform: translateY(-3px);}.hero__button--primary:hover::before {  width: 100%;}/* Focus styles for better accessibility */.hero__button--primary:focus-visible {  outline: 3px solid var(--primary-light);  outline-offset: 2px;  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);}/* Secondary button style */.hero__button--secondary {  background: transparent;  color: var(--white);  border: 2px solid rgba(255, 255, 255, 0.2);  -webkit-backdrop-filter: blur(8px);  backdrop-filter: blur(8px);}.hero__button--secondary:hover {  background: rgba(255, 255, 255, 0.1);  border-color: rgba(255, 255, 255, 0.3);  transform: translateY(-3px);}.hero__button--secondary:focus-visible {  outline: 3px solid var(--primary-light);  outline-offset: 2px;  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);}/* Background particle effects */.hero__particles {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  z-index: 1;  overflow: hidden;}.hero__particles span {  position: absolute;  background: rgba(255, 255, 255, 0.15);  border-radius: 50%;  pointer-events: none;  will-change: transform;}/* Responsive adjustments for different screen sizes */@media (max-width: 992px) {  .hero {   padding: 120px 20px 80px;  }  .hero__stats {   gap: 20px;  }  .hero__stat {   padding: 20px 24px;  }}@media (max-width: 768px) {  .hero {   padding: 100px 20px 70px;   min-height: 80vh;  }  .hero__stats {   gap: 15px;   margin: 30px auto;  }  .hero__stat {   min-width: 140px;   padding: 18px 20px;  }  .hero__stat-value {   font-size: 2rem;  }  .hero__buttons {   flex-direction: column;   align-items: center;   gap: 15px;  }  .hero__button {   width: 100%;   max-width: 280px;  }}@media (max-width: 480px) {  .hero {   padding: 80px 15px 60px;   min-height: 70vh;  }  .hero__title {   margin-bottom: 15px;  }  .hero__description {   margin-bottom: 25px;   font-size: clamp(1rem, 1.5vw, 1.1rem);  }  .hero__stat {   min-width: 130px;   padding: 15px;  }  .hero__stat-value {   font-size: 1.8rem;  }  .hero__stat-label {   font-size: 0.9rem;  }  .hero__button {   padding: 12px 24px;   font-size: 1rem;  }}/* Dark mode enhancements */@media (prefers-color-scheme: dark) {  .hero {   background: linear-gradient(135deg, var(--primary-deeper) 0%, #121212 100%);  }  .hero__button--primary {   background: var(--primary-dark);  }  .hero__button--primary::before {   background: var(--primary-deeper);  }  .hero__stat {   background: rgba(18, 18, 18, 0.4);   border-color: rgba(147, 195, 59, 0.2);  }  .hero__stat:hover {   background: rgba(18, 18, 18, 0.6);  }}/* Respect reduced motion preferences */@media (prefers-reduced-motion: reduce) {  .hero__button,  .hero__stat,  .hero__particles span {   transition: none !important;   animation: none !important;   transform: none !important;  }  .hero__button--primary::before {   transition: none !important;  }  .hero__button:hover,  .hero__stat:hover {   transform: none !important;  }}/* ==========================================================================  Features Section - Core component showcasing product capabilities  Uses flexible grid layout with interactive tabs  ========================================================================== */.features {  padding: clamp(60px, 8vw, 120px) 0;  background: linear-gradient(180deg, var(--white) 0%, var(--off-white) 100%);  background-image: -webkit-linear-gradient(180deg, var(--white) 0%, var(--off-white) 100%);  background-image: -moz-linear-gradient(180deg, var(--white) 0%, var(--off-white) 100%);  position: relative;  overflow: hidden;  z-index: 2;  margin-bottom: 30px;}/* Background visual elements with performance optimizations */.features__bg-elements {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  z-index: 0;  pointer-events: none;  /* Improve performance by telling browser these won't affect layout */  contain: strict;}.floating-shape {  position: absolute;  border-radius: 50%;  opacity: 0.07;  filter: blur(10px);  -webkit-animation: floatAnimation 8s infinite ease-in-out;  animation: floatAnimation 8s infinite ease-in-out;  will-change: transform; /* GPU acceleration hint */  contain: layout style paint; /* Performance optimization */}.shape-1 {  top: 15%;  left: 5%;  width: 200px;  height: 200px;  background: var(--primary);  animation-delay: 0s;  animation-duration: 12s;}.shape-2 {  top: 60%;  right: 8%;  width: 150px;  height: 150px;  background: var(--secondary-blue);  animation-delay: 2s;  animation-duration: 15s;}.shape-3 {  bottom: 10%;  left: 15%;  width: 120px;  height: 120px;  background: var(--secondary-purple);  animation-delay: 1s;  animation-duration: 10s;}.shape-4 {  top: 30%;  right: 25%;  width: 80px;  height: 80px;  background: var(--primary-light);  animation-delay: 3s;  animation-duration: 14s;}/* Float animation with vendor prefixes */@-webkit-keyframes floatAnimation {  0%, 100% {   -webkit-transform: translate(0, 0) rotate(0deg);   transform: translate(0, 0) rotate(0deg);  }  25% {   -webkit-transform: translate(-10px, 15px) rotate(5deg);   transform: translate(-10px, 15px) rotate(5deg);  }  50% {   -webkit-transform: translate(10px, 30px) rotate(-5deg);   transform: translate(10px, 30px) rotate(-5deg);  }  75% {   -webkit-transform: translate(-15px, 10px) rotate(3deg);   transform: translate(-15px, 10px) rotate(3deg);  }}@keyframes floatAnimation {  0%, 100% {   transform: translate(0, 0) rotate(0deg);  }  25% {   transform: translate(-10px, 15px) rotate(5deg);  }  50% {   transform: translate(10px, 30px) rotate(-5deg);  }  75% {   transform: translate(-15px, 10px) rotate(3deg);  }}/* Section header with accessible text and optimized gradient */.features__header {  position: relative;  z-index: 2;  text-align: center;  margin-bottom: clamp(40px, 5vw, 80px);  max-width: 800px;  margin-left: auto;  margin-right: auto;  padding: 0 var(--spacing-md);}.features__badge {  display: inline-block;  background: rgba(147, 195, 59, 0.1);  color: var(--primary-dark);  font-weight: 600;  font-size: 0.9rem;  padding: 8px 16px;  border-radius: 50px;  margin-bottom: 16px;  letter-spacing: 0.5px;  text-transform: uppercase;}.features__title {  font-size: clamp(2rem, 4vw, 2.5rem);  margin-bottom: 20px;  font-weight: 800;  background: linear-gradient(90deg, var(--primary-deeper) 0%, var(--secondary-blue) 100%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;  color: var(--primary-deeper); /* Fallback for browsers that don't support background-clip */  position: relative;  display: inline-block;}.features__description {  color: var(--dark-gray);  font-size: clamp(1rem, 2vw, 1.2rem);  line-height: 1.7;  margin-top: 15px;}/* Interactive tabs with accessibility improvements */.features__tabs {  display: flex;  justify-content: center;  flex-wrap: wrap;  gap: 10px;  margin-bottom: 40px;  position: relative;  z-index: 2;  padding: 0 var(--spacing-md);}.features__tab-button {  background: transparent;  border: none;  color: var(--dark-gray);  padding: 10px 20px;  border-radius: 50px;  font-size: 1rem;  font-weight: 600;  cursor: pointer;  transition: all 0.3s ease;  position: relative;}.features__tab-button::after {  content: '';  position: absolute;  bottom: 0;  left: 50%;  transform: translateX(-50%);  width: 0;  height: 3px;  background: var(--primary);  transition: width 0.3s ease;  border-radius: 3px;}.features__tab-button:hover {  color: var(--primary);}/* Improved focus state for keyboard navigation */.features__tab-button:focus-visible {  outline: 3px solid var(--primary);  outline-offset: 2px;}.features__tab-button--active {  color: var(--primary-dark);  background: rgba(147, 195, 59, 0.1);}.features__tab-button--active::after {  width: 30px;}/* Tab content with optimized animations */.features__tab-content {  position: relative;  z-index: 2;  padding: 0 var(--spacing-md);}.features__tab-pane {  display: none;  animation: fadeIn 0.5s ease forwards;  will-change: opacity, transform; /* Optimize animation performance */}.features__tab-pane--active {  display: block;}@-webkit-keyframes fadeIn {  from {   opacity: 0;   -webkit-transform: translateY(10px);   transform: translateY(10px);  }  to {   opacity: 1;   -webkit-transform: translateY(0);   transform: translateY(0);  }}@keyframes fadeIn {  from {   opacity: 0;   transform: translateY(10px);  }  to {   opacity: 1;   transform: translateY(0);  }}/* Responsive grid layout */.features__grid {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));  gap: 30px;  max-width: 1200px;  margin: 0 auto;  padding: 0 var(--spacing-md);}/* Call-to-action footer */.features__footer {  margin-top: 50px;  text-align: center;  padding: 0 var(--spacing-md);}.features__cta {  display: inline-flex;  align-items: center;  gap: 10px;  background: var(--primary);  color: white;  padding: 15px 30px;  border-radius: 50px;  font-weight: 700;  font-size: 1.1rem;  text-decoration: none;  transition: all 0.3s ease;  box-shadow: 0 10px 20px rgba(147, 195, 59, 0.2);  position: relative;  overflow: hidden;  z-index: 1;}.features__cta::before {  content: '';  position: absolute;  top: 0;  left: 0;  width: 0;  height: 100%;  background: var(--primary-dark);  transition: width 0.3s ease;  z-index: -1;}.features__cta:hover {  transform: translateY(-5px);  box-shadow: 0 15px 30px rgba(147, 195, 59, 0.3);}.features__cta:hover::before {  width: 100%;}/* Improved focus state for accessibility */.features__cta:focus-visible {  outline: 3px solid var(--primary-light);  outline-offset: 3px;  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);}.features__cta i {  transition: transform 0.3s ease;}.features__cta:hover i {  transform: translateX(5px);}/* Responsive adjustments */@media (max-width: 992px) {  .features__grid {   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  }  .shape-1, .shape-2 {   width: 150px;   height: 150px;  }  .shape-3, .shape-4 {   width: 80px;   height: 80px;  }}@media (max-width: 768px) {  .features {   padding: 80px 0;  }  .features__grid {   grid-template-columns: 1fr;   max-width: 500px;   margin: 0 auto;  }  .features__tabs {   flex-wrap: nowrap;   overflow-x: auto;   justify-content: flex-start;   margin: 0 -20px 30px;   padding: 0 20px 10px;   /* Progressive enhancements for browsers that support them */   /* Safari iOS 16+ */   -webkit-overflow-scrolling: touch; /* Smooth scrolling for iOS */   /* Firefox only */   scrollbar-width: thin;   /* IE and Edge */   -ms-overflow-style: none;  }  /* WebKit browsers (Chrome, Safari, etc.) scrollbar styling */  .features__tabs::-webkit-scrollbar {   height: 4px;  }  .features__tabs::-webkit-scrollbar-thumb {   background: var(--primary-light);   border-radius: 4px;  }  .features__tabs::-webkit-scrollbar-track {   background: rgba(147, 195, 59, 0.1);   border-radius: 4px;  }  .features__tab-button {   white-space: nowrap;   flex-shrink: 0;  }  .floating-shape {   opacity: 0.05; /* Reduce visual noise on mobile */  }}@media (max-width: 480px) {  .features {   padding: 60px 0;  }  .features__header {   margin-bottom: 35px;  }  .features__cta {   width: 100%;   max-width: 280px;   padding: 12px 24px;   font-size: 1rem;  }  /* Hide some shapes on very small screens for performance */  .shape-3, .shape-4 {   display: none;  }}/* Dark mode enhancements */@media (prefers-color-scheme: dark) {  .features {   background: linear-gradient(180deg, var(--off-white) 0%, #121212 100%);  }  .features__badge {   background: rgba(147, 195, 59, 0.15);   color: var(--primary-light);  }  .features__title {   background: linear-gradient(90deg, var(--primary-light) 0%, var(--secondary-blue) 100%);   -webkit-background-clip: text;   background-clip: text;  }  .features__description {   color: var(--dark-gray);  }  .features__tab-button {   color: var(--mid-gray);  }  .features__tab-button--active {   color: var(--primary-light);   background: rgba(147, 195, 59, 0.15);  }  .features__cta {   background: var(--primary-dark);   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);  }  .features__cta::before {   background: var(--primary-deeper);  }  .features__cta:hover {   box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);  }  .floating-shape {   opacity: 0.05;  }}/* Respect reduced motion preferences */@media (prefers-reduced-motion: reduce) {  .floating-shape {   animation: none;   transform: none;   opacity: 0.04;  }  .features__tab-pane {   animation: none;  }  .features__cta,  .features__cta:hover,  .features__tab-button,  .features__tab-button::after {   transition: none;   transform: none;  }  .features__cta:hover i {   transform: none;  }}/* ==========================================================================  Feature Card Component  Modern, accessible cards for displaying product features with interactive elements  Following BEM naming convention for maintainability  ========================================================================== */.feature-card {  position: relative;  border-radius: var(--radius-lg);  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),          box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1);  overflow: hidden;  height: 100%;  will-change: transform;  /* Base properties that apply to all feature cards */  background-color: var(--white);  box-shadow: var(--shadow-md);  display: flex;  flex-direction: column;}/* Modern card variant with gradient border and enhanced interactions */.feature-card--new {  position: relative;  background: var(--white);  border-radius: var(--radius-lg);  box-shadow: var(--shadow-md);  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),          box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);  overflow: hidden;  display: flex;  flex-direction: column;  height: 100%;  border-top: 4px solid transparent;  /* Modern gradient border with fallbacks */  border-image: linear-gradient(to right, var(--primary), var(--secondary-blue));  -webkit-border-image: -webkit-linear-gradient(to right, var(--primary), var(--secondary-blue));  -moz-border-image: -moz-linear-gradient(to right, var(--primary), var(--secondary-blue));  border-image-slice: 1;}/* Subtle background gradient effect on hover */.feature-card--new::before {  content: '';  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background: linear-gradient(135deg, rgba(147, 195, 59, 0.03) 0%, rgba(255, 255, 255, 0) 100%);  -webkit-background-image: linear-gradient(135deg, rgba(147, 195, 59, 0.03) 0%, rgba(255, 255, 255, 0) 100%);  opacity: 0;  transition: opacity 0.4s ease;  z-index: 0;  pointer-events: none; /* Ensures hover events pass through */}/* Hover states with performance optimizations */.feature-card--new:hover,.feature-card--new:focus-within {  transform: translateY(-10px);  box-shadow: var(--shadow-lg);}.feature-card--new:hover::before,.feature-card--new:focus-within::before {  opacity: 1;}/* Icon with gradient background and interactive effects */.feature-card__icon {  width: 70px;  height: 70px;  display: flex;  align-items: center;  justify-content: center;  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);  -webkit-background-image: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);  border-radius: var(--radius-lg);  margin: 30px auto 20px;  color: var(--white);  font-size: 1.8rem;  transition: transform 0.3s ease, box-shadow 0.3s ease;  position: relative;  z-index: 1;  box-shadow: 0 10px 20px rgba(147, 195, 59, 0.15);}/* Interactive icon animation on hover with performance considerations */@media (hover: hover) and (pointer: fine) {  .feature-card--new:hover .feature-card__icon {   transform: scale(1.1) rotate(5deg);   box-shadow: 0 15px 30px rgba(147, 195, 59, 0.2);  }}/* Card content layout */.feature-card__content {  padding: 0 30px 30px;  position: relative;  z-index: 1;  flex-grow: 1;  display: flex;  flex-direction: column;}/* Typography styles */.feature-card__title {  font-size: 1.4rem;  font-weight: var(--font-weight-bold);  color: var(--primary-deeper);  margin-bottom: 15px;  text-align: center;}.feature-card__description {  font-size: 1rem;  line-height: 1.6;  color: var(--dark-gray);  margin-bottom: 20px;  text-align: center;}/* Feature list styling */.feature-card__list {  list-style: none;  padding: 0;  margin: 0 0 25px;}.feature-card__list-item {  position: relative;  padding-left: 28px;  margin-bottom: 12px;  color: var(--dark-gray);  transition: transform 0.3s ease, color 0.3s ease;  font-size: 0.95rem;}/* Custom bullet points with visual enhancement */.feature-card__list-item::before {  content: "";  position: absolute;  left: 0;  top: 8px;  width: 6px;  height: 6px;  background-color: var(--primary);  border-radius: 50%;  box-shadow: 0 0 0 2px rgba(147, 195, 59, 0.2);  transition: all 0.3s ease;}/* Interactive list items on hover */@media (hover: hover) and (pointer: fine) {  .feature-card--new:hover .feature-card__list-item {   transform: translateX(5px);   color: var(--black);  }  .feature-card--new:hover .feature-card__list-item::before {   background-color: var(--primary-dark);   box-shadow: 0 0 0 4px rgba(147, 195, 59, 0.3);  }}/* Call-to-action link styling */.feature-card__link {  display: inline-flex;  align-items: center;  justify-content: center;  gap: 8px;  color: var(--primary-dark);  font-weight: var(--font-weight-semibold);  text-decoration: none;  font-size: 1rem;  transition: all 0.3s ease;  margin-top: auto;  align-self: center;  padding: 8px 16px;  border-radius: var(--radius-full);  background: rgba(147, 195, 59, 0.1);}/* Animated icon for enhanced interaction feedback */.feature-card__link i {  transition: transform 0.3s ease;}/* Hover and focus states for accessibility */.feature-card__link:hover,.feature-card__link:focus {  color: var(--secondary-blue);  background: rgba(54, 169, 225, 0.1);}.feature-card__link:hover i,.feature-card__link:focus i {  transform: translateX(5px);}/* Improved keyboard focus styles for accessibility */.feature-card__link:focus-visible {  outline: 3px solid var(--primary);  outline-offset: 2px;  text-decoration: underline;}/* Featured Card variation with inverted colors */.feature-card--featured {  background: linear-gradient(135deg, var(--primary-deeper) 0%, var(--primary-dark) 100%);  -webkit-background-image: linear-gradient(135deg, var(--primary-deeper) 0%, var(--primary-dark) 100%);  color: white;}.feature-card__spotlight {  position: absolute;  top: 20px;  right: 20px;  background: rgba(255, 255, 255, 0.2);  color: white;  padding: 5px 12px;  border-radius: 30px;  font-size: 0.8rem;  font-weight: 600;  z-index: 2;}.feature-card--featured .feature-card__icon {  background: rgba(255, 255, 255, 0.15);  color: white;}.feature-card--featured .feature-card__title {  color: white;}.feature-card--featured .feature-card__description {  color: rgba(255, 255, 255, 0.9);}.feature-card__stats {  display: flex;  justify-content: center;  gap: 30px;  margin: 20px 0;}.feature-card__stat {  display: flex;  flex-direction: column;  align-items: center;}.feature-card__stat-value {  font-size: 1.8rem;  font-weight: 800;  color: var(--primary-light);  margin-bottom: 5px;}.feature-card__stat-label {  font-size: 0.9rem;  color: rgba(255, 255, 255, 0.8);}.feature-card__link--highlight {  background: white;  color: var(--primary-deeper);  padding: 10px 20px;  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);}.feature-card__link--highlight:hover {  transform: translateY(-3px);  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);  color: var(--secondary-blue);}/* Responsive adjustments for different screen sizes */@media (max-width: 992px) {  .feature-card__icon {   width: 60px;   height: 60px;   font-size: 1.6rem;   margin: 25px auto 15px;  }  .feature-card__title {   font-size: 1.3rem;  }}@media (max-width: 768px) {  .feature-card__content {   padding: 0 20px 25px;  }  .feature-card__link {   padding: 7px 14px;   font-size: 0.95rem;  }}@media (max-width: 480px) {  .feature-card--new {   border-image-width: 3px;  }  .feature-card__icon {   width: 50px;   height: 50px;   font-size: 1.4rem;   margin: 20px auto 15px;  }  .feature-card__title {   font-size: 1.2rem;   margin-bottom: 10px;  }  .feature-card__description {   font-size: 0.95rem;   margin-bottom: 15px;  }  .feature-card__list-item {   font-size: 0.9rem;   padding-left: 24px;   margin-bottom: 10px;  }  .feature-card__content {   padding: 0 15px 20px;  }}/* Dark mode enhancements */@media (prefers-color-scheme: dark) {  .feature-card,  .feature-card--new {   background: var(--off-white);   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);  }  .feature-card__title {   color: var(--primary-light);  }  .feature-card__description {   color: var(--dark-gray);  }  .feature-card__list-item {   color: var(--mid-gray);  }  .feature-card--new:hover .feature-card__list-item {   color: var(--light-gray);  }  .feature-card__link {   background: rgba(147, 195, 59, 0.15);   color: var(--primary-light);  }  .feature-card__link:hover,  .feature-card__link:focus {   background: rgba(54, 169, 225, 0.15);  }  .feature-card--new::before {   background: linear-gradient(135deg, rgba(147, 195, 59, 0.08) 0%, rgba(18, 18, 18, 0) 100%);   -webkit-background-image: linear-gradient(135deg, rgba(147, 195, 59, 0.08) 0%, rgba(18, 18, 18, 0) 100%);  }}/* Respect user preferences for reduced motion */@media (prefers-reduced-motion: reduce) {  .feature-card,  .feature-card--new,  .feature-card__icon,  .feature-card__list-item,  .feature-card__link,  .feature-card__link i {   transition: none !important;   animation: none !important;  }  .feature-card--new:hover,  .feature-card--new:focus-within {   transform: none;  }  .feature-card--new:hover .feature-card__icon {   transform: none;  }  .feature-card--new:hover .feature-card__list-item {   transform: none;  }  .feature-card__link:hover i,  .feature-card__link:focus i {   transform: none;  }}/* ==========================================================================  Solution Sectors Section - Display specialized solutions for different industries  with interactive cards and visual indicators  ========================================================================== */.solution-sectors {  position: relative;  padding: clamp(60px, 8vw, 100px) 0 clamp(70px, 10vw, 120px);  background: linear-gradient(to bottom, var(--off-white) 0%, var(--white) 100%);  -webkit-background-image: linear-gradient(to bottom, var(--off-white) 0%, var(--white) 100%);  -moz-background-image: linear-gradient(to bottom, var(--off-white) 0%, var(--white) 100%);  overflow: hidden;  z-index: 1;}.solution-sectors::before {  content: '';  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background-image: url('../images/pattern-dots-light.png');  background-repeat: repeat;  opacity: 0.06;  z-index: 0;  pointer-events: none;}.section-header {  text-align: center;  margin-bottom: clamp(40px, 6vw, 70px);  position: relative;  z-index: 1;  padding: 0 var(--spacing-md);}.section-header__title {  font-size: clamp(2rem, 4vw, 2.5rem);  color: var(--primary-deeper);  margin-bottom: 16px;  font-weight: 800;  position: relative;  display: inline-block;}.section-header__title::after {  content: '';  position: absolute;  bottom: -12px;  left: 50%;  transform: translateX(-50%);  width: 70px;  height: 4px;  background: var(--primary);  border-radius: 4px;  transition: width 0.3s ease;}.section-header:hover .section-header__title::after {  width: 100px;}.section-header__description {  color: var(--dark-gray);  font-size: clamp(1rem, 2vw, 1.2rem);  max-width: 700px;  margin: 24px auto 0;  line-height: 1.6;}.sectors-grid {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));  gap: clamp(20px, 3vw, 35px);  max-width: 1200px;  margin: 0 auto;  position: relative;  z-index: 1;  padding: 0 var(--spacing-md);}.sector-card {  background: var(--white);  border-radius: 20px;  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);  padding: clamp(20px, 4vw, 35px);  transition: transform 0.4s ease, box-shadow 0.4s ease;  display: flex;  flex-direction: column;  height: 100%;  border-top: 5px solid var(--primary);  position: relative;  overflow: hidden;  will-change: transform, box-shadow;  outline: transparent solid 2px;  outline-offset: 2px;}.sector-card::before {  content: '';  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background: linear-gradient(135deg, rgba(147, 195, 59, 0.03) 0%, rgba(255, 255, 255, 0) 100%);  -webkit-background-image: linear-gradient(135deg, rgba(147, 195, 59, 0.03) 0%, rgba(255, 255, 255, 0) 100%);  -moz-background-image: linear-gradient(135deg, rgba(147, 195, 59, 0.03) 0%, rgba(255, 255, 255, 0) 100%);  opacity: 0;  transition: opacity 0.4s ease;  z-index: 0;  pointer-events: none;}/* Interactive states - hover and keyboard focus */.sector-card:hover,.sector-card:focus-within {  transform: translateY(-10px);  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);}.sector-card:hover::before,.sector-card:focus-within::before {  opacity: 1;}.sector-card:focus-within {  outline: 2px solid var(--primary);}.sector-card__icon {  width: clamp(50px, 6vw, 70px);  height: clamp(50px, 6vw, 70px);  display: flex;  align-items: center;  justify-content: center;  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);  -webkit-background-image: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);  -moz-background-image: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);  border-radius: clamp(15px, 2vw, 20px);  margin-bottom: clamp(15px, 3vw, 25px);  color: white;  font-size: clamp(1.5rem, 2vw, 1.8rem);  transition: transform 0.3s ease, box-shadow 0.3s ease;  position: relative;  z-index: 1;  box-shadow: 0 8px 20px rgba(147, 195, 59, 0.15);}.sector-card:hover .sector-card__icon,.sector-card:focus-within .sector-card__icon {  transform: scale(1.1) rotate(5deg);  box-shadow: 0 10px 20px rgba(147, 195, 59, 0.2);}.sector-card__title {  font-size: clamp(1.2rem, 3vw, 1.4rem);  font-weight: 700;  color: var(--primary-deeper);  margin-bottom: 15px;  position: relative;  z-index: 1;}.sector-card__description {  font-size: 1rem;  line-height: 1.6;  color: var(--dark-gray);  margin-bottom: 20px;  flex-grow: 1;  position: relative;  z-index: 1;}.sector-card__link {  display: inline-flex;  align-items: center;  gap: 8px;  color: var(--primary-dark);  font-weight: 600;  text-decoration: none;  transition: color 0.3s ease;  margin-top: auto;  position: relative;  z-index: 1;  padding: 8px 0;  border-radius: var(--radius-sm);}.sector-card__link i {  transition: transform 0.3s ease;}.sector-card__link:hover,.sector-card__link:focus {  color: var(--secondary-blue);}.sector-card__link:hover i,.sector-card__link:focus i {  transform: translateX(5px);}/* Improved focus styles for keyboard users */.sector-card__link:focus-visible {  outline: 2px solid var(--primary);  outline-offset: 4px;}/* Dark mode support */@media (prefers-color-scheme: dark) {  .solution-sectors {   background: linear-gradient(to bottom, var(--off-white) 0%, #121212 100%);   -webkit-background-image: linear-gradient(to bottom, var(--off-white) 0%, #121212 100%);   -moz-background-image: linear-gradient(to bottom, var(--off-white) 0%, #121212 100%);  }  .section-header__title {   color: var(--primary-light);  }  .sector-card {   background: rgba(30, 30, 30, 0.8);   box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);   border-top-color: var(--primary-light);  }  .sector-card::before {   background: linear-gradient(135deg, rgba(147, 195, 59, 0.08) 0%, rgba(18, 18, 18, 0) 100%);   -webkit-background-image: linear-gradient(135deg, rgba(147, 195, 59, 0.08) 0%, rgba(18, 18, 18, 0) 100%);   -moz-background-image: linear-gradient(135deg, rgba(147, 195, 59, 0.08) 0%, rgba(18, 18, 18, 0) 100%);  }  .sector-card__title {   color: var(--primary-light);  }  .sector-card__link {   color: var(--primary-light);  }  .sector-card__link:hover,  .sector-card__link:focus {   color: var(--secondary-blue);  }}/* Respect user's motion preferences */@media (prefers-reduced-motion: reduce) {  .solution-sectors,  .section-header__title::after,  .sector-card,  .sector-card::before,  .sector-card__icon,  .sector-card__link,  .sector-card__link i {   transition: none !important;   animation: none !important;  }  .sector-card:hover,  .sector-card:focus-within {   transform: none;  }  .sector-card:hover .sector-card__icon,  .sector-card:focus-within .sector-card__icon {   transform: none;  }  .sector-card__link:hover i,  .sector-card__link:focus i {   transform: none;  }}/* Responsive adjustments for smaller screens */@media (max-width: 768px) {  .sectors-grid {   grid-template-columns: 1fr;   max-width: 500px;  }  .sector-card {   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); /* Lighter shadow for mobile */  }}@media (max-width: 480px) {  .sector-card {   padding: 20px;  }  .sector-card__icon {   margin: 0 auto 15px;  }  .sector-card__title {   text-align: center;  }  .sector-card__description {   text-align: center;  }  .sector-card__link {   align-self: center;  }}/* ==========================================================================  Testimonials Section - Social proof showcasing client feedback  Provides credibility and reinforces value proposition  ========================================================================== */.testimonials {  padding: clamp(70px, 8vw, 110px) 0;  background: linear-gradient(to bottom right, var(--white), #f9fcf5);  -webkit-background-image: linear-gradient(to bottom right, var(--white), #f9fcf5);  -moz-background-image: linear-gradient(to bottom right, var(--white), #f9fcf5);  position: relative;  overflow: hidden;  z-index: 1;}.testimonials::before {  content: '';  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background-image: url('../images/pattern-dots-light.png');  background-repeat: repeat;  opacity: 0.08;  z-index: 0;  pointer-events: none; /* Ensures it doesn't interfere with interactions */}.testimonials__container {  max-width: 1200px;  margin: 0 auto;  padding: 0 var(--spacing-md);  position: relative;  z-index: 2;}.testimonials__header {  text-align: center;  margin-bottom: clamp(40px, 6vw, 60px);  position: relative;}.testimonials__title {  font-size: clamp(2rem, 4vw, 2.5rem);  color: var(--primary-deeper);  font-weight: 800;  position: relative;  display: inline-block;  margin-bottom: 25px;}.testimonials__title::after {  content: '';  position: absolute;  bottom: -12px;  left: 50%;  transform: translateX(-50%);  width: 70px;  height: 4px;  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);  -webkit-background-image: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);  -moz-background-image: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);  border-radius: 4px;  transition: width 0.3s ease;}.testimonials__header:hover .testimonials__title::after {  width: 100px;}.testimonials__description {  color: var(--dark-gray);  font-size: clamp(1rem, 2vw, 1.1rem);  max-width: 700px;  margin: 0 auto;  line-height: 1.6;}.testimonials-grid {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));  gap: clamp(20px, 3vw, 35px);  max-width: 1200px;  margin: 0 auto;  position: relative;  z-index: 1;}.testimonial-card {  background: var(--white);  border-radius: var(--radius-lg);  padding: 35px 30px;  box-shadow: var(--shadow-md);  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),          box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);  position: relative;  overflow: hidden;  height: 100%;  display: flex;  flex-direction: column;  /* Add initial transparent border to prevent layout shifts on hover */  border-top: 4px solid transparent;  will-change: transform, box-shadow;  outline: transparent solid 2px;  outline-offset: 2px;}/* Quote icon styling with performance optimizations */.testimonial-card::before {  content: '"';  position: absolute;  top: 10px;  left: 20px;  font-size: 120px;  line-height: 1;  font-family: Georgia, serif;  color: rgba(147, 195, 59, 0.1);  z-index: 0;  pointer-events: none;  transition: color 0.3s ease;}/* Interactive states with reduced layout shifts */.testimonial-card:hover,.testimonial-card:focus-within {  transform: translateY(-10px);  box-shadow: var(--shadow-lg);  border-top-color: var(--primary);}.testimonial-card:focus-within {  outline: 2px solid var(--primary);}.testimonial-card:hover::before,.testimonial-card:focus-within::before {  color: rgba(147, 195, 59, 0.15);}.testimonial-card__content {  position: relative;  z-index: 1;  flex-grow: 1;  display: flex;  flex-direction: column;}.testimonial-card__quote {  position: relative;  z-index: 1;  font-size: 1.05rem;  line-height: 1.7;  color: var(--dark-gray);  margin-bottom: 24px;  flex-grow: 1;  font-style: italic;}.testimonial-card__footer {  display: flex;  align-items: center;  gap: 15px;  margin-top: auto;}.testimonial-card__avatar {  width: 50px;  height: 50px;  border-radius: 50%;  object-fit: cover;  border: 2px solid rgba(147, 195, 59, 0.2);  transition: border-color 0.3s ease;}.testimonial-card:hover .testimonial-card__avatar,.testimonial-card:focus-within .testimonial-card__avatar {  border-color: var(--primary);}.testimonial-card__info {  flex: 1;}.testimonial-card__author {  font-size: 1.15rem;  font-weight: var(--font-weight-bold);  color: var(--primary-deeper);  margin-bottom: 6px;  position: relative;  z-index: 1;}.testimonial-card__role {  font-size: 0.95rem;  color: var(--dark-gray);  opacity: 0.85;  position: relative;  z-index: 1;}.testimonial-card__rating {  display: flex;  gap: 3px;  color: var(--secondary-orange);  font-size: 1rem;  margin-top: 10px;}/* Accessible button for expanding longer testimonials */.testimonial-card__read-more {  background: transparent;  border: none;  color: var(--primary-dark);  font-weight: var(--font-weight-semibold);  padding: 8px 16px;  margin-top: 15px;  cursor: pointer;  border-radius: var(--radius-full);  align-self: flex-start;  transition: background-color 0.3s ease, color 0.3s ease;  font-size: 0.95rem;  display: flex;  align-items: center;  gap: 6px;}.testimonial-card__read-more:hover,.testimonial-card__read-more:focus {  background-color: rgba(147, 195, 59, 0.1);  color: var(--primary);}.testimonial-card__read-more:focus-visible {  outline: 2px solid var(--primary);  outline-offset: 2px;}.testimonial-card__read-more i {  transition: transform 0.3s ease;  font-size: 0.85rem;}.testimonial-card__read-more:hover i,.testimonial-card__read-more:focus i {  transform: translateX(3px);}/* Call-to-action elements at bottom of section */.testimonials__footer {  text-align: center;  margin-top: 60px;}.testimonials__cta {  display: inline-flex;  align-items: center;  justify-content: center;  gap: 10px;  background: var(--primary);  color: var(--white);  padding: 14px 30px;  border-radius: var(--radius-full);  font-weight: var(--font-weight-bold);  font-size: 1.1rem;  text-decoration: none;  transition: all 0.3s ease;  box-shadow: 0 10px 20px rgba(147, 195, 59, 0.2);  position: relative;  overflow: hidden;  z-index: 1;}.testimonials__cta::before {  content: '';  position: absolute;  top: 0;  left: 0;  width: 0;  height: 100%;  background: var(--primary-dark);  transition: width 0.3s ease;  z-index: -1;}.testimonials__cta:hover,.testimonials__cta:focus {  transform: translateY(-5px);  box-shadow: 0 15px 30px rgba(147, 195, 59, 0.3);}.testimonials__cta:hover::before,.testimonials__cta:focus::before {  width: 100%;}.testimonials__cta:focus-visible {  outline: 3px solid var(--primary-light);  outline-offset: 2px;}/* Responsive adjustments for different screen sizes */@media (max-width: 992px) {  .testimonials-grid {   grid-template-columns: repeat(2, 1fr);  }  .testimonial-card::before {   font-size: 100px;   top: 5px;   left: 15px;  }}@media (max-width: 768px) {  .testimonials {   padding: 80px 0;  }  .testimonials-grid {   grid-template-columns: 1fr;   max-width: 550px;   margin: 0 auto;  }  .testimonial-card {   padding: 30px 25px;  }  .testimonial-card::before {   font-size: 90px;   opacity: 0.07;  }}@media (max-width: 480px) {  .testimonials {   padding: 60px 0;  }  .testimonial-card {   padding: 25px 20px;  }  .testimonial-card::before {   font-size: 70px;   top: 5px;   left: 10px;  }  .testimonial-card__footer {   flex-direction: column;   align-items: flex-start;   gap: 10px;  }  .testimonial-card__avatar {   width: 45px;   height: 45px;  }  .testimonials__cta {   width: 100%;   max-width: 280px;   padding: 12px 24px;   font-size: 1rem;  }}/* Dark mode enhancements */@media (prefers-color-scheme: dark) {  .testimonials {   background: linear-gradient(to bottom right, var(--off-white), #131613);   -webkit-background-image: linear-gradient(to bottom right, var(--off-white), #131613);   -moz-background-image: linear-gradient(to bottom right, var(--off-white), #131613);  }  .testimonials__title {   color: var(--primary-light);  }  .testimonial-card {   background: rgba(30, 30, 30, 0.8);   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);  }  .testimonial-card:hover,  .testimonial-card:focus-within {   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);   border-top-color: var(--primary-light);  }  .testimonial-card::before {   color: rgba(147, 195, 59, 0.07);  }  .testimonial-card__author {   color: var(--primary-light);  }  .testimonial-card__quote,  .testimonial-card__role {   color: var(--mid-gray);  }  .testimonial-card__read-more {   color: var(--primary-light);  }  .testimonial-card__read-more:hover,  .testimonial-card__read-more:focus {   background-color: rgba(147, 195, 59, 0.15);  }  .testimonial-card__avatar {   border-color: rgba(147, 195, 59, 0.15);  }}/* Respect reduced motion preferences */@media (prefers-reduced-motion: reduce) {  .testimonials__title::after,  .testimonial-card,  .testimonial-card::before,  .testimonial-card__avatar,  .testimonial-card__read-more,  .testimonial-card__read-more i,  .testimonials__cta,  .testimonials__cta::before {   transition: none !important;   animation: none !important;  }  .testimonial-card:hover,  .testimonial-card:focus-within {   transform: none;  }  .testimonials__cta:hover,  .testimonials__cta:focus {   transform: none;  }  .testimonial-card__read-more:hover i,  .testimonial-card__read-more:focus i {   transform: none;  }}/* ==========================================================================  Why Choose Us Section - Showcases key benefits with interactive cards  Follows BEM methodology for maintainable component structure  ========================================================================== */.why-choose-us {  padding: clamp(70px, 8vw, 120px) 0;  background: linear-gradient(135deg, #f9fcf5 0%, #f1f9ec 100%);  background-image: -webkit-linear-gradient(135deg, #f9fcf5 0%, #f1f9ec 100%);  background-image: -moz-linear-gradient(135deg, #f9fcf5 0%, #f1f9ec 100%);  background-image: -o-linear-gradient(135deg, #f9fcf5 0%, #f1f9ec 100%);  position: relative;  overflow: hidden;  z-index: 1;}/* Background pattern with performance optimization */.why-choose-us::before {  content: '';  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background: url('../images/pattern-dots.svg');  background-repeat: repeat;  opacity: 0.04;  z-index: 0;  pointer-events: none; /* Ensures it doesn't interfere with interactions */  contain: strict; /* Performance optimization */}/* Responsive grid layout with auto-fit for flexible columns */.benefits-grid {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));  gap: clamp(20px, 3vw, 35px);  max-width: 1200px;  margin: 0 auto;  position: relative;  z-index: 1;  padding: 0 var(--spacing-md);}/* Benefit card component with improved accessibility and performance */.benefit-card {  background: rgba(255, 255, 255, 0.9);  -webkit-backdrop-filter: blur(10px);  backdrop-filter: blur(10px);  border-radius: var(--radius-lg);  padding: clamp(25px, 4vw, 35px);  box-shadow: var(--shadow-md);  text-align: center;  height: 100%;  display: flex;  flex-direction: column;  align-items: center;  position: relative;  /* Use targeted transitions instead of 'all' for better performance */  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),          box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);  /* Only apply will-change when needed to avoid memory issues */  will-change: transform, box-shadow;  /* Add outline for focus state without layout shift */  outline: transparent solid 2px;  outline-offset: 2px;}/* Interactive states with improved a11y */.benefit-card:hover,.benefit-card:focus-within {  transform: translateY(-10px);  box-shadow: var(--shadow-lg);}.benefit-card:focus-within {  outline: 2px solid var(--primary);}/* Icon with consistent styling and performance optimizations */.benefit-card__icon {  width: clamp(60px, 8vw, 80px);  height: clamp(60px, 8vw, 80px);  display: flex;  align-items: center;  justify-content: center;  margin: 0 auto 20px;  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);  background-image: -webkit-linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);  background-image: -moz-linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);  background-image: -o-linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);  color: var(--white);  font-size: clamp(1.5rem, 2vw, 2rem);  border-radius: 50%;  box-shadow: 0 10px 20px rgba(147, 195, 59, 0.15);  transition: transform 0.3s ease, box-shadow 0.3s ease;  position: relative;  z-index: 1;}/* Only apply hover effects when pointer is available */@media (hover: hover) and (pointer: fine) {  .benefit-card:hover .benefit-card__icon {   transform: scale(1.1) rotate(5deg);   box-shadow: 0 15px 30px rgba(147, 195, 59, 0.2);  }}.benefit-card__title {  font-size: clamp(1.1rem, 3vw, 1.3rem);  font-weight: var(--font-weight-bold);  color: var(--primary-deeper);  margin-bottom: 15px;  position: relative;  z-index: 1;}.benefit-card__description {  font-size: clamp(0.95rem, 2vw, 1rem);  line-height: 1.6;  color: var(--dark-gray);  flex-grow: 1;  position: relative;  z-index: 1;}/* Enhanced dark mode support */@media (prefers-color-scheme: dark) {  .why-choose-us {   background: linear-gradient(135deg, rgba(18, 18, 18, 0.8) 0%, rgba(30, 30, 30, 0.9) 100%);   background-image: -webkit-linear-gradient(135deg, rgba(18, 18, 18, 0.8) 0%, rgba(30, 30, 30, 0.9) 100%);   background-image: -moz-linear-gradient(135deg, rgba(18, 18, 18, 0.8) 0%, rgba(30, 30, 30, 0.9) 100%);   background-image: -o-linear-gradient(135deg, rgba(18, 18, 18, 0.8) 0%, rgba(30, 30, 30, 0.9) 100%);  }  .benefit-card {   background: rgba(30, 30, 30, 0.85);   box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);  }  .benefit-card:hover,  .benefit-card:focus-within {   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);  }  .benefit-card__title {   color: var(--primary-light);  }  .benefit-card__description {   color: var(--mid-gray);  }}/* Respect user preferences for reduced motion */@media (prefers-reduced-motion: reduce) {  .benefit-card,  .benefit-card:hover,  .benefit-card:focus-within,  .benefit-card__icon,  .benefit-card:hover .benefit-card__icon {   transition: none !important;   animation: none !important;   transform: none !important;  }}/* Responsive adjustments for smaller screens */@media (max-width: 768px) {  .benefits-grid {   grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));  }}@media (max-width: 480px) {  .benefit-card {   padding: 25px 20px;  }  .benefit-card__icon {   margin-bottom: 15px;  }}/* ==========================================================================  Platform Stats Section - Showcases key metrics with interactive counters  Follows BEM naming convention with performance optimizations  ========================================================================== */.platform-stats {  padding: clamp(60px, 8vw, 100px) 0;  background: linear-gradient(135deg, var(--primary-deeper) 0%, var(--primary-dark) 100%);  color: var(--white);  position: relative;  overflow: hidden;  z-index: 1;}/* Background pattern with performance optimization */.platform-stats::before {  content: '';  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background-image: url('../images/pattern-triangles.svg');  background-repeat: repeat;  opacity: 0.06;  z-index: 0;  pointer-events: none; /* Ensures it doesn't interfere with interactions */  contain: strict; /* Performance optimization */}/* Responsive flex container for statistics */.stats-wrapper {  display: flex;  flex-wrap: wrap;  justify-content: space-around;  max-width: 1200px;  margin: 0 auto;  position: relative;  z-index: 2;  padding: 20px var(--spacing-md);  gap: clamp(20px, 3vw, 40px);}/* Individual stat card with optimized animations */.stat-container {  text-align: center;  padding: clamp(20px, 4vw, 30px);  flex: 1;  min-width: 200px;  border-radius: var(--radius-lg);  background: rgba(255, 255, 255, 0.05);  -webkit-backdrop-filter: blur(10px);  backdrop-filter: blur(10px);  position: relative;  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),          background-color 0.3s ease;  /* Only apply will-change during interaction to avoid memory issues */  will-change: transform;  /* Improve accessibility with outline that doesn't cause layout shifts */  outline: transparent solid 2px;  outline-offset: 2px;}/* Interactive hover effects with performance considerations */.stat-container:hover,.stat-container:focus-within {  transform: translateY(-15px);  background: rgba(255, 255, 255, 0.1);}/* Accessible focus state */.stat-container:focus-within {  outline: 2px solid var(--primary-light);}/* Animated underline indicator */.stat-container::after {  content: '';  position: absolute;  bottom: 0;  left: 50%;  transform: translateX(-50%);  width: 0;  height: 3px;  background: var(--primary-light);  transition: width 0.3s ease;  border-radius: 1.5px;}.stat-container:hover::after,.stat-container:focus-within::after {  width: 60%;}/* Counter number with visual enhancement */.stat-figure {  font-size: clamp(2.5rem, 5vw, 3.8rem);  font-weight: var(--font-weight-extrabold);  margin-bottom: 15px;  color: var(--primary-light);  line-height: 1;  display: flex;  align-items: center;  justify-content: center;  position: relative;}.counter {  display: inline-block;  position: relative;}/* Visual separator under the counter */.counter::after {  content: '';  position: absolute;  bottom: -8px;  left: 50%;  transform: translateX(-50%);  width: 40px;  height: 3px;  background: rgba(255, 255, 255, 0.2);  border-radius: 2px;}/* Stat description with improved typography */.stat-label {  font-size: clamp(0.9rem, 2vw, 1.2rem);  color: rgba(255, 255, 255, 0.9);  text-transform: uppercase;  letter-spacing: 1px;  font-weight: var(--font-weight-medium);  margin-top: 15px;  position: relative;}/* Responsive adjustments for different screen sizes */@media (max-width: 992px) {  .stat-container {   min-width: 180px;  }}@media (max-width: 768px) {  .platform-stats {   padding: 80px 0;  }  .stats-wrapper {   gap: 20px;  }  .stat-container {   flex-basis: calc(50% - 40px);   min-width: 150px;  }  .stat-figure {   font-size: 3rem;  }}@media (max-width: 480px) {  .platform-stats {   padding: 60px 0;  }  .stats-wrapper {   flex-direction: column;   align-items: center;  }  .stat-container {   width: 100%;   max-width: 280px;   padding: 25px 15px;  }  /* Reduced animation for better performance on mobile */  .stat-container:hover,  .stat-container:focus-within {   transform: translateY(-10px);  }}/* Dark mode adjustments (this section is already dark by default) */@media (prefers-color-scheme: dark) {  .platform-stats {   background: linear-gradient(135deg, #1a2e10 0%, #244217 100%);  }  .stat-container {   background: rgba(0, 0, 0, 0.15);  }  .stat-container:hover,  .stat-container:focus-within {   background: rgba(0, 0, 0, 0.25);  }}/* Respect reduced motion preferences */@media (prefers-reduced-motion: reduce) {  .stat-container,  .stat-container::after {   transition: none !important;  }  .stat-container:hover,  .stat-container:focus-within {   transform: none;  }}/* ==========================================================================  Call to Action Section - Convert visitors with prominent action prompts  Uses optimized animations and accessible design patterns  ========================================================================== */.cta-section {  padding: clamp(70px, 8vw, 120px) 0;  background-color: var(--primary-deeper); /* Fallback solid color */  background-image: -webkit-linear-gradient(135deg, var(--primary-deeper) 0%, var(--primary-dark) 100%);  background-image: -moz-linear-gradient(135deg, var(--primary-deeper) 0%, var(--primary-dark) 100%);  background-image: -o-linear-gradient(135deg, var(--primary-deeper) 0%, var(--primary-dark) 100%);  background-image: linear-gradient(135deg, var(--primary-deeper) 0%, var(--primary-dark) 100%);  color: var(--white);  position: relative;  overflow: hidden;  z-index: 1;}/* Background pattern with performance optimization */.cta-section::before {  content: '';  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background-image: url('../images/pattern-dots-light.png');  background-repeat: repeat;  opacity: 0.05;  z-index: 0;  pointer-events: none; /* Ensures it doesn't interfere with interactions */  contain: strict; /* Performance optimization */}.cta-container {  max-width: 1200px;  margin: 0 auto;  padding: 0 var(--spacing-md);  position: relative;  z-index: 2;  text-align: center;}/* Accessible heading with gradient text effect */.cta-title {  font-size: clamp(2rem, 5vw, 3rem);  font-weight: var(--font-weight-extrabold);  margin-bottom: 2rem;  background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.85) 100%);  -webkit-background-clip: text;  background-clip: text;  -webkit-text-fill-color: transparent;  color: var(--white); /* Fallback for browsers that don't support background-clip */  display: inline-block;  position: relative;}/* Decorative underline with animation */.cta-title::after {  content: '';  position: absolute;  bottom: -12px;  left: 50%;  transform: translateX(-50%);  width: 80px;  height: 4px;  background: var(--primary-light);  border-radius: 4px;  transition: width 0.3s ease;}/* Interactive hover effect */.cta-container:hover .cta-title::after {  width: 120px;}.cta-description {  font-size: clamp(1rem, 2vw, 1.25rem);  line-height: 1.7;  margin-bottom: clamp(2rem, 4vw, 3rem);  color: rgba(255, 255, 255, 0.9);  max-width: 900px;  margin-left: auto;  margin-right: auto;}/* Flexible button container with proper spacing */.cta-actions {  display: flex;  justify-content: center;  gap: clamp(15px, 3vw, 25px);  margin-bottom: clamp(2rem, 5vw, 3.5rem);  flex-wrap: wrap;}/* Base button styles with accessibility improvements */.cta-btn {  display: inline-flex;  align-items: center;  justify-content: center;  gap: 10px;  padding: clamp(14px, 2vw, 18px) clamp(25px, 3vw, 35px);  border-radius: var(--radius-full);  font-weight: var(--font-weight-bold);  font-size: clamp(1rem, 1.5vw, 1.1rem);  text-decoration: none;  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),          box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),          background-color 0.3s ease,          border-color 0.3s ease;  border: 2px solid transparent;  position: relative;  overflow: hidden;  z-index: 1;  /* Performance optimization, only applied during interaction */  will-change: transform;}/* Icon animation for better interaction feedback */.cta-btn i {  font-size: 1.2rem;  transition: transform 0.3s ease;}.cta-btn:hover i,.cta-btn:focus i {  transform: translateX(5px);}/* Primary CTA button with enhanced hover effects */.cta-btn--primary {  background-color: var(--white);  color: var(--primary-deeper);  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);}.cta-btn--primary::before {  content: '';  position: absolute;  top: 0;  left: 0;  width: 0;  height: 100%;  background-color: rgba(147, 195, 59, 0.1);  z-index: -1;  transition: width 0.4s ease;}.cta-btn--primary:hover::before,.cta-btn--primary:focus::before {  width: 100%;}.cta-btn--primary:hover,.cta-btn--primary:focus {  transform: translateY(-5px);  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);}/* Secondary CTA button styles */.cta-btn--secondary {  background-color: transparent;  color: var(--white);  border: 2px solid rgba(255, 255, 255, 0.3);}.cta-btn--secondary:hover,.cta-btn--secondary:focus {  background-color: rgba(255, 255, 255, 0.1);  border-color: rgba(255, 255, 255, 0.5);  transform: translateY(-5px);}/* Improved focus styles for accessibility */.cta-btn:focus-visible {  outline: 3px solid var(--primary-light);  outline-offset: 3px;  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);}/* Contact details with proper spacing and typography */.cta-contact-details {  color: rgba(255, 255, 255, 0.9);  line-height: 1.7;  font-size: clamp(0.95rem, 1.5vw, 1.1rem);  padding-top: 20px;  border-top: 1px solid rgba(255, 255, 255, 0.1);  display: flex;  flex-direction: column;  gap: 10px;  justify-content: center;}.cta-contact-details a {  color: var(--primary-light);  transition: color 0.3s ease;  text-decoration: none;  padding: 4px;  border-radius: var(--radius-sm);  display: inline-block;}.cta-contact-details a:hover {  color: var(--white);  text-decoration: underline;}/* Improved focus states for contact links */.cta-contact-details a:focus-visible {  outline: 2px solid var(--primary-light);  outline-offset: 2px;  text-decoration: underline;}/* Dark mode enhancements */@media (prefers-color-scheme: dark) {  .cta-section {   background: linear-gradient(135deg, #1a2e10 0%, #244217 100%);   background-image: -webkit-linear-gradient(135deg, #1a2e10 0%, #244217 100%);   background-image: -moz-linear-gradient(135deg, #1a2e10 0%, #244217 100%);  }  .cta-btn--primary {   background-color: rgba(255, 255, 255, 0.9);   color: var(--primary-deeper);   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);  }  .cta-btn--primary:hover,  .cta-btn--primary:focus {   box-shadow: 0 15px 30px rgba(0, 0, 0, 0.35);  }  .cta-contact-details a {   color: var(--primary-light);  }}/* Responsive adjustments for different screen sizes */@media (max-width: 768px) {  .cta-section {   padding: 80px 0;  }  .cta-actions {   flex-direction: column;   align-items: center;   gap: 15px;  }  .cta-btn {   width: 100%;   max-width: 280px;  }}@media (max-width: 480px) {  .cta-section {   padding: 60px 0;  }  .cta-title {   margin-bottom: 1.5rem;  }  .cta-description {   margin-bottom: 1.5rem;  }  .cta-btn {   padding: 12px 24px;   font-size: 1rem;  }  .cta-contact-details {   font-size: 0.95rem;  }}/* Respect reduced motion preferences */@media (prefers-reduced-motion: reduce) {  .cta-title::after,  .cta-btn,  .cta-btn i,  .cta-btn::before {   transition: none !important;   animation: none !important;  }  .cta-btn:hover,  .cta-btn:focus {   transform: none !important;  }  .cta-btn:hover i,  .cta-btn:focus i {   transform: none !important;  }}/* ==========================================================================  Responsive Adjustments - Optimized for all devices and screen sizes  Follows mobile-first approach with logical breakpoints  ========================================================================== *//* Large desktop and beyond (1400px+) */@media (min-width: 1400px) {  .container {   max-width: 1320px;  }  .hero__title {   font-size: 3.8rem;  }  .hero__description {   font-size: 1.4rem;   max-width: 800px;  }  .section-header__title {   font-size: 2.8rem;  }}/* Standard desktop (1200px-1399px) */@media (max-width: 1200px) {  .container {   max-width: 1140px;  }  .features__grid,  .sectors-grid,  .benefits-grid,  .testimonials-grid {   padding: 0 var(--spacing-md);  }  .feature-card__content {   padding: 0 25px 25px;  }}/* Small desktop and large tablets (992px-1199px) */@media (max-width: 992px) {  .container {   max-width: 960px;   padding-left: var(--spacing-md);   padding-right: var(--spacing-md);  }  .hero__title {   font-size: 3rem;  }  .hero__description {   font-size: 1.2rem;  }  /* Features section adjustments */  .features__tab-content {   grid-template-columns: 1fr;   gap: 40px;  }  .features__grid {   grid-template-columns: repeat(2, 1fr);   gap: 25px;  }  /* Sector cards adjustments */  .sectors-grid {   grid-template-columns: repeat(2, 1fr);   gap: 25px;  }  /* Benefits grid adjustments */  .benefits-grid {   grid-template-columns: repeat(2, 1fr);   gap: 25px;  }  /* Stats container adjustments */  .stats-wrapper {   flex-wrap: wrap;   gap: 25px;  }  .stat-container {   flex-basis: calc(50% - 50px);   min-width: 180px;  }  /* Testimonial adjustments */  .testimonials-grid {   grid-template-columns: repeat(2, 1fr);   gap: 25px;  }  /* Reduce animation intensity for better performance */  .feature-card:hover,  .sector-card:hover,  .benefit-card:hover,  .testimonial-card:hover,  .stat-container:hover {   transform: translateY(-8px);  }}/* Tablets and large phones (768px-991px) */@media (max-width: 768px) {  .container {   max-width: 720px;   padding-left: var(--spacing-sm);   padding-right: var(--spacing-sm);  }  /* General section spacing */  .features,  .solution-sectors,  .testimonials,  .why-choose-us,  .platform-stats,  .cta-section {   padding: 80px 0;  }  .features__header,  .section-header,  .testimonials__header {   margin-bottom: 50px;  }  /* Hero section adjustments */  .hero {   padding: 100px var(--spacing-md) 80px;   min-height: 80vh;  }  .hero__title {   font-size: 2.8rem;  }  .hero__stats {   gap: 15px;   flex-wrap: wrap;   justify-content: center;  }  .hero__buttons {   flex-direction: column;   align-items: center;   gap: 15px;  }  .hero__button {   width: 100%;   max-width: 280px;  }  /* Features tab navigation - scrollable on mobile */  .features__tabs {   flex-wrap: nowrap;   overflow-x: auto;   justify-content: flex-start;   margin: 0 calc(-1 * var(--spacing-md)) 30px;   padding: 0 var(--spacing-md) 10px;   -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */   scrollbar-width: thin; /* Firefox */  }  .features__tabs::-webkit-scrollbar {   height: 4px;  }  .features__tabs::-webkit-scrollbar-thumb {   background: var(--primary-light);   border-radius: 4px;  }  .features__tabs::-webkit-scrollbar-track {   background: rgba(147, 195, 59, 0.1);   border-radius: 4px;  }  .features__tab-button {   white-space: nowrap;   flex-shrink: 0;  }  /* Convert multi-column grids to single column */  .features__grid,  .sectors-grid,  .benefits-grid {   grid-template-columns: 1fr;   max-width: 500px;   margin: 0 auto;  }  .testimonials-grid {   grid-template-columns: 1fr;   max-width: 550px;   margin: 0 auto;  }  /* Card padding adjustments */  .sector-card,  .benefit-card,  .testimonial-card {   padding: 25px 20px;  }  .feature-card__content {   padding: 0 20px 25px;  }  /* Stats containers */  .stat-container {   padding: 25px;   margin: 10px;   min-width: 160px;  }  /* CTA section */  .cta-btn {   padding: 15px 28px;  }  .cta-actions {   flex-direction: column;   align-items: center;   gap: 15px;  }  .cta-btn {   width: 100%;   max-width: 280px;  }  /* Improve touch targets for mobile */  .feature-card__link,  .sector-card__link,  .testimonial-card__read-more {   padding: 10px 16px;   margin-top: 10px;  }  /* Optimize box-shadows for performance */  .feature-card,  .sector-card,  .benefit-card,  .testimonial-card {   box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);  }  .feature-card:hover,  .sector-card:hover,  .benefit-card:hover,  .testimonial-card:hover {   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);  }}/* Mobile phones (576px-767px) */@media (max-width: 576px) {  .container {   max-width: 540px;  }  .hero__title {   font-size: 2.3rem;  }  .hero__description {   font-size: 1.05rem;  }  .section-header__title,  .features__title,  .testimonials__title {   font-size: 2rem;  }  /* Reduce icon sizes */  .feature-card__icon,  .sector-card__icon,  .benefit-card__icon {   width: 55px;   height: 55px;   font-size: 1.5rem;  }}/* Small mobile devices (under 480px) */@media (max-width: 480px) {  /* Reduced section spacing */  .hero {   padding: 80px var(--spacing-sm) 60px;   min-height: 70vh;  }  .features,  .solution-sectors,  .testimonials,  .why-choose-us,  .platform-stats,  .cta-section {   padding: 60px 0;  }  .features__header,  .section-header,  .testimonials__header {   margin-bottom: 35px;  }  /* Typography adjustments */  .hero__title {   font-size: 2rem;   margin-bottom: 1.5rem;  }  .hero__description {   margin-bottom: 1.5rem;   font-size: 1rem;  }  .hero__badge {   margin: 1rem 0;   font-size: 0.8rem;   padding: 6px 14px;  }  .hero__stats {   margin: 2rem auto;   gap: 10px;  }  .hero__stat {   min-width: 130px;   padding: 15px;  }  .hero__stat-value {   font-size: 1.8rem;  }  .hero__stat-label {   font-size: 0.9rem;  }  /* Card adjustments */  .feature-card--new,  .sector-card,  .benefit-card,  .testimonial-card {   padding: 20px 15px;  }  .feature-card__icon,  .sector-card__icon,  .benefit-card__icon {   width: 50px;   height: 50px;   font-size: 1.4rem;   margin-bottom: 15px;  }  .feature-card__title,  .sector-card__title,  .benefit-card__title {   font-size: 1.2rem;   margin-bottom: 10px;  }  .feature-card__description,  .sector-card__description,  .benefit-card__description {   font-size: 0.95rem;   margin-bottom: 15px;  }  .feature-card__list-item {   font-size: 0.9rem;   padding-left: 24px;   margin-bottom: 10px;  }  /* Stats adjustments */  .stat-container {   padding: 20px 15px;   margin: 8px;   width: 100%;   max-width: 250px;  }  .stat-figure {   font-size: 2.5rem;  }  .stat-label {   font-size: 0.9rem;  }  /* CTA adjustments */  .cta-btn {   padding: 12px 24px;   font-size: 1rem;  }  .cta-title {   font-size: 1.8rem;  }  .cta-description {   font-size: 1rem;  }  /* Improve accessibility on small screens */  .skip-link:focus,  .skip-link:active {   width: 70%;   font-size: 0.9rem;   padding: 10px;  }  /* Further reduce animations for performance */  .feature-card:hover,  .sector-card:hover,  .benefit-card:hover,  .testimonial-card:hover {   transform: translateY(-5px);  }  /* Optimize layout for testimonials */  .testimonial-card__footer {   flex-direction: column;   align-items: flex-start;   gap: 10px;  }}/* Device-specific optimizations *//* Ensure better touch targets on touch devices */@media (hover: none) and (pointer: coarse) {  .feature-card__link,  .sector-card__link,  .testimonial-card__read-more,  .cta-btn {   padding: 12px 20px;   min-height: 44px; /* Apple recommended minimum */  }  /* Reduce hover effects that may cause confusion on touch devices */  .feature-card:hover,  .sector-card:hover,  .benefit-card:hover,  .testimonial-card:hover,  .stat-container:hover {   transform: translateY(-3px);  }  /* Improve tap targets in navigation */  .features__tab-button {   padding: 12px 22px;   margin: 0 3px;  }}/* Print styles - optimize for printing */@media print {  .hero,  .features,  .solution-sectors,  .testimonials,  .why-choose-us,  .platform-stats,  .cta-section {   padding: 20px 0;   margin: 20px 0;   page-break-inside: avoid;  }  .hero__buttons,  .features__tabs,  .cta-actions,  .preloader,  .hero__particles,  .floating-shape {   display: none !important;  }  .feature-card,  .sector-card,  .benefit-card,  .testimonial-card {   break-inside: avoid;   box-shadow: none;   border: 1px solid #ddd;  }  body {   font-size: 12pt;   color: #000;   background: #fff;  }  a {   color: #000;   text-decoration: underline;  }}/* ==========================================================================  Accessibility and Theme Enhancements - Comprehensive improvements  Extends existing accessibility features with improved focus management,  motion sensitivity handling, and dark mode refinements  ========================================================================== *//* Enhanced focus states with :focus-visible support */a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {  outline: 3px solid var(--primary);  outline-offset: 3px;  box-shadow: 0 0 0 3px rgba(147, 195, 59, 0.25);}/* Improved focus handling for mouse vs keyboard interaction */a:focus:not(:focus-visible),button:focus:not(:focus-visible),input:focus:not(:focus-visible),select:focus:not(:focus-visible),textarea:focus:not(:focus-visible) {  outline: none;  box-shadow: none;}/* High contrast mode support for better accessibility */@media (forced-colors: active) {  a:focus,  button:focus,  input:focus,  select:focus,  textarea:focus {   outline: 3px solid HighlightText !important;  }  /* Ensure interactive elements have visible borders in high contrast mode */  .skip-link,  .cta-btn,  .hero__button,  .features__cta,  .feature-card__link,  .sector-card__link,  .testimonial-card__read-more {   border: 1px solid currentColor;  }}/* Expanded reduced motion support */@media (prefers-reduced-motion: reduce) {  /* Disable animations on interactive components not covered in the base implementation */  .feature-card--new, .feature-card--new:hover, .feature-card--new:focus-within,  .sector-card, .sector-card:hover, .sector-card:focus-within,  .sector-card__icon, .sector-card:hover .sector-card__icon,  .benefit-card, .benefit-card:hover, .benefit-card:focus-within,  .benefit-card__icon, .benefit-card:hover .benefit-card__icon,  .testimonial-card, .testimonial-card:hover, .testimonial-card:focus-within,  .stat-container, .stat-container:hover, .stat-container:focus-within,  .section-header__title::after, .testimonials__title::after, .cta-title::after,  .feature-card__link i, .feature-card__link:hover i,  .sector-card__link i, .sector-card__link:hover i,  .testimonial-card__read-more i, .testimonial-card__read-more:hover i {   animation: none !important;   transition: none !important;   transform: none !important;  }  /* Disable background transitions */  .feature-card--new::before,  .sector-card::before,  .hero__button::before,  .features__cta::before,  .testimonials__cta::before,  .cta-btn::before {   transition: none !important;  }}/* Enhanced dark mode refinements - extends existing implementation */@media (prefers-color-scheme: dark) {  /* Additional components not covered in the base dark mode */  .features__badge {   background: rgba(147, 195, 59, 0.15);   color: var(--primary-light);  }  .features__tab-button {   color: var(--mid-gray);  }  .features__tab-button--active {   color: var(--primary-light);   background: rgba(147, 195, 59, 0.15);  }  /* Enhance card backgrounds for better contrast */  .feature-card--new::before,  .sector-card::before {   background: linear-gradient(135deg, rgba(147, 195, 59, 0.08) 0%, rgba(18, 18, 18, 0) 100%);   -webkit-background-image: linear-gradient(135deg, rgba(147, 195, 59, 0.08) 0%, rgba(18, 18, 18, 0) 100%);  }  /* Refined focus styles for dark mode */  a:focus-visible,  button:focus-visible,  input:focus-visible,  select:focus-visible,  textarea:focus-visible {   outline-color: var(--primary-light);   box-shadow: 0 0 0 3px rgba(147, 195, 59, 0.2);  }  /* Additional button styles */  .hero__button--secondary {   border-color: rgba(255, 255, 255, 0.2);  }  .hero__button--secondary:hover {   background: rgba(255, 255, 255, 0.1);   border-color: rgba(255, 255, 255, 0.3);  }}/* Print style enhancements */@media print {  /* Disable background colors and gradients */  .hero,  .features,  .solution-sectors,  .testimonials,  .why-choose-us,  .platform-stats,  .cta-section {   background: none !important;   color: #000 !important;  }  /* Hide decorative elements */  .floating-shape,  .hero__particles span,  .features__bg-elements,  .solution-sectors::before,  .testimonials::before,  .why-choose-us::before,  .platform-stats::before,  .cta-section::before {   display: none !important;  }  /* Optimize text for printing */  .feature-card__title,  .sector-card__title,  .benefit-card__title,  .testimonial-card__author,  .section-header__title,  .features__title,  .testimonials__title,  .hero__title {   color: #000 !important;   background: none !important;   -webkit-text-fill-color: #000 !important;   text-fill-color: #000 !important;  }  /* Ensure cards print well */  .feature-card,  .sector-card,  .benefit-card,  .testimonial-card {   page-break-inside: avoid;   break-inside: avoid;   border: 1px solid #ddd !important;   box-shadow: none !important;  }  /* Format links for print */  a[href]:after {   content: " (" attr(href) ")";   font-size: 90%;   color: #333;  }  /* Optimize page breaks */  h1, h2, h3,  .hero__title,  .section-header__title,  .features__title,  .testimonials__title {   page-break-after: avoid;  }  img {   page-break-inside: avoid;   max-width: 100% !important;  }}/* ==========================================================================   eduSYMS Mega Navigation - Premium Edition   Using BEM methodology for consistent class naming   ========================================================================== */body {  /* Navigation Colors */  --nav-bg: var(--color-background);  --nav-item-color: var(--color-text-primary);  --nav-item-hover-color: var(--accent-1);  --nav-item-hover-bg: var(--color-card);  --nav-active-color: var(--accent-1);  --nav-dropdown-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);  --nav-dropdown-bg: var(--color-card);  --nav-dropdown-hover-bg: rgba(147, 195, 60, 0.05);  --nav-dropdown-border: rgba(147, 195, 60, 0.1);  --nav-mobile-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);}/* ==========================================================================   Main Navigation Bar   ========================================================================== */.edusyms-mega-navbar {  background: var(--nav-bg);  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);  position: sticky;  top: 0;  z-index: 1000;  width: 100%;  font-family: var(--font-main, 'Poppins', sans-serif);  border-bottom: 1px solid rgba(147, 195, 59, 0.1);}.edusyms-nav-bar-inner {  max-width: 1300px;  margin: 0 auto;  display: flex;  align-items: center;  justify-content: space-between;  padding: 0 20px;  height: 80px;}/* Logo Styling */.edusyms-nav-logo {  display: flex;  align-items: center;  text-decoration: none;  color: var(--nav-item-color);}.edusyms-nav-logo img {  height: 44px;  width: auto;  display: block;}.edusyms-live-tag {  display: inline-flex;  align-items: center;  font-size: 12px;  margin-left: 10px;  background: rgba(79, 140, 255, 0.1);  padding: 3px 8px;  border-radius: 12px;  color: #25316D;  font-weight: 600;}.edusyms-live-tag i {  color: #4f8cff;  font-size: 8px;  margin-right: 4px;  animation: pulse 2s infinite;}@keyframes pulse {  0% { opacity: 0.6; }  50% { opacity: 1; }  100% { opacity: 0.6; }}/* Theme Toggle Button */.theme-toggle {  background: none;  border: none;  color: var(--nav-item-color);  font-size: 1.2rem;  cursor: pointer;  padding: 8px;  border-radius: 50%;  transition: background 0.2s, color 0.2s;}.theme-toggle:hover,.theme-toggle:focus {  background: var(--nav-item-hover-bg);  color: var(--nav-item-hover-color);}/* Main Menu Items */.edusyms-main-menu {  display: flex;  list-style: none;  margin: 0;  padding: 0;  gap: 5px;}.edusyms-main-menu > li {  position: relative;}.edusyms-main-menu > li > a {  display: flex;  align-items: center;  color: var(--nav-item-color);  text-decoration: none;  padding: 10px 15px;  font-weight: 600;  font-size: 15px;  border-radius: 24px;  transition: all 0.2s ease;}.edusyms-main-menu > li:hover > a,.edusyms-main-menu > li.active > a {  background: var(--nav-item-hover-bg);  color: var(--nav-item-hover-color);}.edusyms-main-menu i {  margin-right: 6px;}.edusyms-main-menu i.fa-chevron-down {  margin-left: 4px;  margin-right: 0;  font-size: 0.8rem;  opacity: 0.7;  transition: transform 0.2s ease;}.edusyms-main-menu > li:hover i.fa-chevron-down {  transform: rotate(180deg);}/* ==========================================================================   Dropdown Panels   ========================================================================== */.dropdown-panel {  position: absolute;  top: 100%;  left: 0;  min-width: 250px;  background: var(--nav-dropdown-bg);  border-radius: 12px;  box-shadow: var(--nav-dropdown-shadow);  padding: 15px 0;  display: none;  z-index: 200;  animation: fadeInUp 0.3s ease;  border: 1px solid var(--nav-dropdown-border);  transform-origin: top center;}.gradient-panel {  background: linear-gradient(to bottom right, #ffffff, #f9fcf5);}.has-dropdown:hover .dropdown-panel,.has-mega:hover .mega-menu-outer {  display: block;}.dropdown-panel a {  display: flex;  align-items: center;  padding: 10px 20px;  color: #4a4a4a;  text-decoration: none;  transition: all 0.2s ease;  font-weight: 500;}.dropdown-panel a:hover {  background: var(--nav-dropdown-hover-bg);  color: var(--nav-item-hover-color);}.dropdown-panel a i {  margin-right: 10px;  color: var(--nav-item-hover-color);  width: 20px;  text-align: center;}/* Dropdown Sections */.dropdown-section {  padding: 12px 20px;  border-bottom: 1px solid rgba(0, 0, 0, 0.05);}.dropdown-section:last-child {  border-bottom: none;}.dropdown-section h5 {  font-size: 16px;  margin-top: 0;  margin-bottom: 10px;  color: #25316D;  display: flex;  align-items: center;}.dropdown-section h5 i {  margin-right: 8px;}.dropdown-section p {  font-size: 14px;  margin: 0 0 10px 0;  color: #666;}.dropdown-img-thumb {  width: 40px;  height: 40px;  border-radius: 50%;  margin-right: 10px;  object-fit: cover;  display: inline-block;  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);}.dropdown-action {  display: inline-flex;  align-items: center;  color: var(--nav-item-hover-color);  font-weight: 600;  text-decoration: none;  font-size: 14px;  margin-top: 8px;}.dropdown-action i {  margin-left: 5px;  transition: transform 0.2s ease;}.dropdown-action:hover i {  transform: translateX(3px);}/* Impact Spotlight in Dropdown */.impact-spotlight {  background: rgba(147, 195, 59, 0.05);  border-radius: 10px;}.impact-stats {  display: flex;  gap: 15px;  margin-bottom: 10px;}.impact-stats div {  font-size: 14px;  color: #666;}.impact-stats span {  display: block;  font-size: 16px;  font-weight: 700;  color: var(--nav-item-hover-color);}/* ==========================================================================   Mega Menu   ========================================================================== */.mega-menu-outer {  position: absolute;  top: 100%;  left: 50%;  transform: translateX(-50%);  width: 800px;  background: var(--nav-dropdown-bg);  border-radius: 16px;  box-shadow: var(--nav-dropdown-shadow);  padding: 25px;  display: none;  z-index: 200;  animation: fadeInUp 0.3s ease;  border: 1px solid var(--nav-dropdown-border);}.mega-menu-columns {  display: flex;  gap: 30px;}.mega-col {  flex: 1;}.mega-col h6 {  font-size: 15px;  color: #25316D;  margin-top: 0;  margin-bottom: 15px;  font-weight: 700;  display: flex;  align-items: center;}.mega-col h6 i {  margin-right: 8px;}.mega-col a {  display: flex;  align-items: center;  padding: 7px 0;  color: #4a4a4a;  text-decoration: none;  transition: all 0.2s ease;  font-weight: 500;  font-size: 14px;}.mega-col a:hover {  color: var(--nav-item-hover-color);  padding-left: 5px;}.mega-col a i {  margin-right: 8px;  color: var(--nav-item-hover-color);  width: 20px;  text-align: center;}/* Featured Section in Mega Menu */.mega-featured {  display: flex;  flex-direction: column;  align-items: center;  background: rgba(147, 195, 59, 0.03);  padding: 20px;  border-radius: 12px;}.mega-featured img {  width: 80px;  height: auto;  border-radius: 10px;  margin-bottom: 15px;  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);}.featured-desc {  text-align: center;  margin-bottom: 15px;  font-size: 14px;}.ai-status {  display: inline-flex;  align-items: center;  background: rgba(79, 140, 255, 0.1);  color: #4f8cff;  padding: 5px 10px;  border-radius: 20px;  font-size: 12px;  font-weight: 600;  margin-bottom: 15px;}.ai-status i {  margin-right: 5px;}.animated-glow {  animation: glow 1.5s infinite alternate;}@keyframes glow {  from {    box-shadow: 0 0 5px rgba(79, 140, 255, 0.1);  }  to {    box-shadow: 0 0 10px rgba(79, 140, 255, 0.3);  }}.btn-featured {  display: inline-flex;  align-items: center;  background: var(--nav-item-hover-color);  color: #fff;  padding: 8px 16px;  border-radius: 20px;  text-decoration: none;  font-weight: 600;  font-size: 14px;  transition: all 0.2s ease;}.btn-featured:hover {  background: #3a7ae8;  transform: translateY(-2px);}.btn-featured i {  margin-left: 8px;}/* ==========================================================================   Mobile Navigation   ========================================================================== */.nav-hamburger {  display: none;  background: none;  border: none;  cursor: pointer;  padding: 10px;  outline: none;}.nav-hamburger span {  display: block;  width: 26px;  height: 3px;  background: var(--nav-item-hover-color);  margin: 5px 0;  border-radius: 3px;  transition: all 0.3s ease;}.edusyms-mobile-drawer {  position: fixed;  top: 0;  right: -320px;  width: 320px;  height: 100vh;  background: var(--nav-bg);  z-index: 1000;  overflow-y: auto;  transition: right 0.3s ease;  box-shadow: var(--nav-mobile-shadow);  padding: 20px;}.edusyms-mobile-drawer.open {  right: 0;}.drawer-header {  display: flex;  justify-content: space-between;  align-items: center;  margin-bottom: 20px;}.drawer-header button {  background: none;  border: none;  font-size: 24px;  color: var(--nav-item-hover-color);  cursor: pointer;  padding: 5px;}.nav-logo-mini img {  height: 40px;  width: auto;}.edusyms-mobile-drawer ul {  list-style: none;  padding: 0;  margin: 0;}.edusyms-mobile-drawer > ul > li {  margin-bottom: 15px;}.edusyms-mobile-drawer > ul > li > a {  display: flex;  align-items: center;  color: var(--nav-item-color);  text-decoration: none;  font-weight: 600;  font-size: 16px;  padding: 8px 0;}.edusyms-mobile-drawer > ul > li.active > a {  color: var(--nav-item-hover-color);}.edusyms-mobile-drawer > ul > li > a i {  margin-right: 10px;  width: 20px;  text-align: center;}.edusyms-mobile-drawer > ul > li > ul {  margin-left: 30px;  margin-top: 5px;}.edusyms-mobile-drawer > ul > li > ul > li {  margin-bottom: 8px;}.edusyms-mobile-drawer > ul > li > ul > li > a {  color: #666;  text-decoration: none;  font-size: 15px;  display: block;  padding: 5px 0;}.drawer-featured {  margin-top: 30px;  padding-top: 20px;  border-top: 1px solid rgba(147, 195, 59, 0.2);}.drawer-featured a {  display: flex;  align-items: center;  text-decoration: none;}.drawer-featured img {  width: 50px;  height: 50px;  border-radius: 10px;  margin-right: 15px;  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);}.drawer-featured span {  color: var(--nav-item-color);  font-weight: 600;}.drawer-status {  display: flex;  justify-content: space-between;  margin-top: 30px;  padding-top: 15px;  border-top: 1px solid rgba(147, 195, 59, 0.1);}/* ==========================================================================   Animations & Transitions   ========================================================================== */@keyframes fadeInUp {  from {    opacity: 0;    transform: translateY(10px);  }  to {    opacity: 1;    transform: translateY(0);  }}/* ==========================================================================   Accessibility Enhancements   ========================================================================== *//* Improved focus styles */.edusyms-main-menu a:focus,.dropdown-panel a:focus,.mega-col a:focus,.btn-featured:focus,.edusyms-mobile-drawer a:focus,.nav-hamburger:focus,.drawer-header button:focus {  outline: 2px solid var(--nav-item-hover-color);  outline-offset: 2px;}/* Skip to content link */.skip-to-content {  position: absolute;  left: -9999px;  top: -9999px;  width: 1px;  height: 1px;  overflow: hidden;  z-index: 9999;}.skip-to-content:focus {  left: 0;  top: 0;  width: auto;  height: auto;  padding: 10px 15px;  background: var(--nav-item-hover-color);  color: white;  font-weight: 600;  text-decoration: none;}/* ==========================================================================   Responsive Breakpoints   ========================================================================== */@media (max-width: 1100px) {  .mega-menu-outer {    width: 700px;  }  .edusyms-main-menu > li > a {    padding: 10px 12px;    font-size: 14px;  }}@media (max-width: 991px) {  .mega-menu-outer {    width: 90vw;    left: auto;    right: 0;    transform: none;  }  .mega-menu-columns {    flex-wrap: wrap;  }  .mega-col {    flex: 1 1 45%;    min-width: 200px;  }}@media (max-width: 850px) {  .edusyms-main-menu {    display: none;  }  .nav-hamburger {    display: block;  }  /* When mobile menu is open, prevent scrolling */  body.drawer-open {    overflow: hidden;  }  /* Better hamburger animation */  .nav-hamburger.open span:nth-child(1) {    transform: rotate(45deg) translate(5px, 5px);  }  .nav-hamburger.open span:nth-child(2) {    opacity: 0;  }  .nav-hamburger.open span:nth-child(3) {    transform: rotate(-45deg) translate(5px, -5px);  }}@media (max-width: 480px) {  .edusyms-nav-bar-inner {    height: 70px;  }  .edusyms-nav-logo img {    height: 36px;  }  .edusyms-mobile-drawer {    width: 100%;    right: -100%;  }}/* ==========================================================================   Reduced Motion Preferences   ========================================================================== */@media (prefers-reduced-motion: reduce) {  .edusyms-mega-navbar *,  .edusyms-mega-navbar *::before,  .edusyms-mega-navbar *::after {    animation-duration: 0.01ms !important;    animation-iteration-count: 1 !important;    transition-duration: 0.01ms !important;    scroll-behavior: auto !important;  }  .dropdown-panel,  .mega-menu-outer,  .edusyms-mobile-drawer {    animation: none !important;    transition: none !important;  }}