/*=====================================================
Table of contents
=======================================================

1. Google fonts
2. Theme variables
3. General css
4. Theme default css
5. Margin & padding
6. Preloader
7. Bs custom css
8. Container
9. Nice select css
10. Play btn
11. Site title css
12. Theme button
13. Header top css
14. Navbar css
15. Navbar multi level dropdown
16. Navbar mega menu
17. Search popup
18. Sidebar popup css 
19. Main section css 
20. Hero css 
21. Breadcrumb css
22. About css 
23. Feature css 
24. Service css 
25. Service single
26. Step/process css 
27. Skill css 
28. Portfolio css 
29. Portfolio single
30. Pricing css
31. Counter css 
32. Team css 
33. Video css 
34. Quote css 
35. Location css 
36. Cta css 
37. Choose css 
38. Track shipment css 
39. Testimonial css 
40. Gallery css 
41. Blog css 
42. Blog single css
43. Blog sidebar widget css
44. Pagination css 
45. Faq css 
46. Contact us css 
47. Auth css
48. Coming soon css 
49. Error css 
50. Terms/privacy css
51. Scroll top css
52. Footer css 
53. Home-2 css 
54. Home-3 css 

=======================================================*/


/*====================
1. Google fonts
======================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Roboto:wght@100;300;400;500;700;900&display=swap');


/*====================
2. Theme variables - COMPREHENSIVE DESIGN TOKENS
======================*/

/* Light Mode (Default) */
:root {
  /* Fonts */
  --body-font: 'Roboto', sans-serif;
  --heading-font: "Poppins", sans-serif;
  
  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f7f7f7;
  --surface: #ffffff;
  
  /* Text Colors */
  --text-primary: #0b0b0b;
  --text-secondary: #000000;
  --text-muted: #6b6b6b;
  
  /* Borders & Icons */
  --border: #e5e5e5;
  --icon: #f4a300;
  --icon-primary: #0b0b0b;
  
  /* Accent Color */
  --accent: #f4a300;
  --accent-hover: #FFAE00;
  
  /* Card-specific tokens (locked) */
  --card-bg-light: #ffffff;
  --card-bg-dark: #141414;
  --card-text-light-primary: #0b0b0b;
  --card-text-light-secondary: #444444;
  --card-text-dark-primary: #ffffff;
  --card-text-dark-secondary: #cfcfcf;
  
  /* Legacy/Compatibility Variables */
  --theme-color: #f4a300;
  --theme-color2: #FFAE00;
  --theme-bg-light: #F6F6F6;
  --theme-color-light: rgba(244, 163, 0, .1);
  --body-text-color: #0b0b0b;
  --color-white: #ffffff;
  --color-dark: #0b0b0b;
  --color-green: #f4a300;
  --color-blue: #f4a300;
  --color-skyblue: #f4a300;
  --color-yellow: #f4a300;
  --color-gray: #ECECEC;
  --color-red: #f4a300;
  --box-shadow: 0 0 40px 5px rgb(0 0 0 / 5%);
  --box-shadow2: 0 0 15px rgba(0, 0, 0, 0.17);
  --transition: all .5s ease-in-out;
  --transition2: all .3s ease-in-out;
  --border-info-color: rgba(0, 0, 0, 0.08);
  --border-info-color2: rgba(0, 0, 0, 0.05);
  --border-white-color: rgba(255, 255, 255, 0.08);
  --border-white-color2: rgba(255, 255, 255, 0.05);
  --footer-bg: #000000;
  --footer-text-color: #F5FAFF;
}

/* Dark Mode */
[data-theme="dark"] {
  /* Background Colors */
  --bg-primary: #0b0b0b;
  --bg-secondary: #111111;
  --surface: #141414;
  
  /* Text Colors */
  --text-primary: #ffffff;
  --text-secondary: #cfcfcf;
  --text-muted: #9a9a9a;
  
  /* Borders & Icons */
  --border: #2a2a2a;
  --icon: #f4a300;
  --icon-primary: #ffffff;
  
  /* Accent Color (same in both modes) */
  --accent: #f4a300;
  --accent-hover: #FFAE00;
  
  /* Card-specific tokens (locked) */
  --card-bg-light: #ffffff;
  --card-bg-dark: #141414;
  --card-text-light-primary: #0b0b0b;
  --card-text-light-secondary: #444444;
  --card-text-dark-primary: #ffffff;
  --card-text-dark-secondary: #cfcfcf;
  
  /* Legacy/Compatibility Variables */
  --theme-color: #f4a300;
  --theme-color2: #FFAE00;
  --theme-bg-light: #111111;
  --theme-color-light: rgba(244, 163, 0, .1);
  --body-text-color: #ffffff;
  --color-white: #ffffff;
  --color-dark: #0b0b0b;
  --color-green: #f4a300;
  --color-blue: #f4a300;
  --color-skyblue: #f4a300;
  --color-yellow: #f4a300;
  --color-gray: #2a2a2a;
  --color-red: #f4a300;
  --box-shadow: 0 0 40px 5px rgb(0 0 0 / 30%);
  --box-shadow2: 0 0 15px rgba(0, 0, 0, 0.5);
  --border-info-color: rgba(255, 255, 255, 0.08);
  --border-info-color2: rgba(255, 255, 255, 0.05);
  --border-white-color: rgba(255, 255, 255, 0.08);
  --border-white-color2: rgba(255, 255, 255, 0.05);
  --footer-bg: #000000;
  --footer-text-color: #F5FAFF;
}



/*====================
3. General css
======================*/

*,
*:before,
*:after {
  box-sizing: inherit;
}

* {
  scroll-behavior: inherit !important;
}

html,
body {
  height: auto;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =====================
SAFE DARK/LIGHT MODE - BODY LEVEL ONLY
====================== */

body {
  font-family: var(--body-font);
  font-style: normal;
  font-size: 16px;
  font-weight: normal;
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  line-height: 1.8;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Light mode body */
:root:not([data-theme="dark"]) body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* Dark mode body */
[data-theme="dark"] body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

a {
  color: var(--text-primary);
  display: inline-block;
}

a,
a:active,
a:focus,
a:hover {
  outline: none;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  text-decoration: none;
}

a:hover {
  color: var(--accent);
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-primary) !important;
  margin: 0px;
  font-weight: 600;
  font-family: var(--heading-font);
  line-height: 1.2;
  transition: color 0.3s ease;
}

/* Paragraphs and body text */
p,
li,
span,
.body-text {
  color: var(--text-secondary) !important;
  transition: color 0.3s ease;
}

/* Dark sections - force white text for paragraphs */
.sa-bg p,
.sa-bg li,
.sa-bg span,
.service-area.sa-bg p,
.service-area.sa-bg li,
.service-area.sa-bg span {
  color: #ffffff !important;
}

/* =====================
WHITE BACKGROUND SECTIONS - BLACK TEXT RULE
====================== */

/* Sections with white/light backgrounds MUST have dark text */
.about-area,
.skill-area,
.process-area,
.pricing-area,
.track-shipment,
.feature-area.fta-2 {
  background-color: var(--bg-primary) !important;
}

/* White background sections - force dark text */
.about-area h1,
.about-area h2,
.about-area h3,
.about-area h4,
.about-area h5,
.about-area h6,
.about-area .site-title,
.about-area .site-heading,
.about-area .site-heading .site-title,
.about-area p,
.about-area .about-text,
.about-area .about-content p,
.about-area .about-item h6,
.about-area .about-item p,
.skill-area h1,
.skill-area h2,
.skill-area h3,
.skill-area h4,
.skill-area h5,
.skill-area h6,
.skill-area .site-title,
.skill-area .site-heading,
.skill-area .site-heading .site-title,
.skill-area p,
.skill-area .skill-text,
.process-area h1,
.process-area h2,
.process-area h3,
.process-area h4,
.process-area h5,
.process-area h6,
.process-area .site-title,
.process-area .site-heading,
.process-area .site-heading .site-title,
.process-area p,
.process-area .process-item h4,
.process-area .process-item p,
.pricing-area h1,
.pricing-area h2,
.pricing-area h3,
.pricing-area h4,
.pricing-area h5,
.pricing-area h6,
.pricing-area .site-title,
.pricing-area .site-heading,
.pricing-area .site-heading .site-title,
.pricing-area p,
.pricing-area .pricing-header h5,
.pricing-area .pricing-amount strong,
.pricing-area .pricing-feature li,
.track-shipment h1,
.track-shipment h2,
.track-shipment h3,
.track-shipment h4,
.track-shipment h5,
.track-shipment h6,
.track-shipment .site-title,
.track-shipment p,
.track-shipment-form h4,
.feature-area.fta-2 h1,
.feature-area.fta-2 h2,
.feature-area.fta-2 h3,
.feature-area.fta-2 h4,
.feature-area.fta-2 h5,
.feature-area.fta-2 h6,
.feature-area.fta-2 .site-title,
.feature-area.fta-2 .site-heading,
.feature-area.fta-2 p {
  color: var(--text-primary) !important;
}

/* White background cards/items - dark text */
.feature-area.fta-2 .feature-item,
.pricing-area .pricing-item,
.process-area .process-item,
.track-shipment-form {
  background: var(--surface) !important;
}

/* About cards - dark mode variant */
[data-theme="dark"] .about-area .about-item {
  background: #121212 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .about-area .about-item .content h6,
[data-theme="dark"] .about-area .about-item .content p {
  color: #f5f5f5 !important;
}

[data-theme="dark"] .about-area .about-item .icon {
  background: var(--theme-color) !important;
}

[data-theme="dark"] .about-area .about-item .icon img {
  filter: brightness(0) invert(1);
}

.feature-area.fta-2 .feature-item h4,
.feature-area.fta-2 .feature-content h4,
/* Pricing area text - explicit black */
.pricing-area .pricing-item h5,
.pricing-area .pricing-item strong,
.pricing-area .pricing-item p,
.pricing-area .pricing-item li,
.pricing-area .pricing-feature li,
.process-area .process-item h4,
.process-area .process-item p,
.process-item .content h4,
.process-item .content p,
.track-shipment-form h4,
.track-shipment-form p,
.track-shipment-form label {
  color: var(--text-primary) !important;
}

/* Feature area fta-2 paragraphs - black text on white cards */
.feature-area.fta-2 .feature-item p,
.feature-area.fta-2 .feature-content p {
  color: #000000 !important;
}

/* Global rule: Any element with white/light background gets dark text */
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background: white"],
[style*="background:white"],
[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background-color: white"],
[style*="background-color:white"],
[style*="background: #ffffff"],
[style*="background:#ffffff"],
[style*="background-color: #ffffff"],
[style*="background-color:#ffffff"] {
  color: var(--text-primary) !important;
}

[style*="background: #fff"] h1,
[style*="background: #fff"] h2,
[style*="background: #fff"] h3,
[style*="background: #fff"] h4,
[style*="background: #fff"] h5,
[style*="background: #fff"] h6,
[style*="background: #fff"] p,
[style*="background: #fff"] span,
[style*="background: #fff"] li,
[style*="background: #fff"] a,
[style*="background: #fff"] * {
  color: var(--text-primary) !important;
}

/* Ensure about-item, process-item, pricing-item have dark text on white backgrounds */
.about-item,
.about-item h6,
.about-item p,
.about-item .content h6,
.about-item .content p,
.process-item,
.process-item h4,
.process-item p,
.process-item .content h4,
.process-item .content p,
/* Pricing item text - explicit black (overridden by comprehensive fix below) */
.pricing-item,
.pricing-item h5,
.pricing-item strong,
.pricing-item p,
.pricing-item li,
.pricing-item .pricing-header h5,
.pricing-item .pricing-amount strong {
  color: #000000 !important;
}

/* Ensure white background sections have dark text (but don't override dark sections) */
.about-area:not(.sa-bg) h1,
.about-area:not(.sa-bg) h2,
.about-area:not(.sa-bg) h3,
.about-area:not(.sa-bg) h4,
.about-area:not(.sa-bg) h5,
.about-area:not(.sa-bg) h6,
.about-area:not(.sa-bg) .site-title,
.about-area:not(.sa-bg) p,
.about-area:not(.sa-bg) .about-text,
.about-area:not(.sa-bg) .about-item h6,
.about-area:not(.sa-bg) .about-item p,
.skill-area:not(.sa-bg) h1,
.skill-area:not(.sa-bg) h2,
.skill-area:not(.sa-bg) h3,
.skill-area:not(.sa-bg) h4,
.skill-area:not(.sa-bg) h5,
.skill-area:not(.sa-bg) h6,
.skill-area:not(.sa-bg) .site-title,
.skill-area:not(.sa-bg) p,
.process-area:not(.sa-bg) h1,
.process-area:not(.sa-bg) h2,
.process-area:not(.sa-bg) h3,
.process-area:not(.sa-bg) h4,
.process-area:not(.sa-bg) h5,
.process-area:not(.sa-bg) h6,
.process-area:not(.sa-bg) .site-title,
.process-area:not(.sa-bg) p,
.pricing-area:not(.sa-bg) h1,
.pricing-area:not(.sa-bg) h2,
.pricing-area:not(.sa-bg) h3,
.pricing-area:not(.sa-bg) h4,
.pricing-area:not(.sa-bg) h5,
.pricing-area:not(.sa-bg) h6,
.pricing-area:not(.sa-bg) .site-title,
.pricing-area:not(.sa-bg) p {
  color: var(--text-primary) !important;
}

/* Muted/helper text */
.muted,
.text-muted {
  color: var(--text-muted) !important;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 35px;
}

h3 {
  font-size: 28px;
}

h4 {
  font-size: 22px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 16px;
}

p {
  margin: 0px;
}

.img,
img {
  max-width: 100%;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
  height: auto;
}

label {
  color: #999;
  cursor: pointer;
  font-weight: 400;
}

*::-moz-selection {
  background: #d6b161;
  color: var(--color-white);
  text-shadow: none;
}

::-moz-selection {
  background: #555;
  color: var(--color-white);
  text-shadow: none;
}

::selection {
  background: #555;
  color: var(--color-white);
  text-shadow: none;
}

*::-moz-placeholder {
  color: #999;
  font-size: 16px;
  opacity: 1;
}

*::placeholder {
  color: #999;
  font-size: 16px;
  opacity: 1;
}




/*===================
4. Theme default css
======================*/

.bg {
  background: var(--theme-bg-light);
}



/*====================
5. Margin & padding
======================*/

.pt-0 {
  padding-top: 0px;
}

.pt-10 {
  padding-top: 10px;
}

.pt-20 {
  padding-top: 20px;
}

.pt-30 {
  padding-top: 30px;
}

.pt-40 {
  padding-top: 40px;
}

.pt-50 {
  padding-top: 50px;
}

.pt-60 {
  padding-top: 60px;
}

.pt-70 {
  padding-top: 70px;
}

.pt-80 {
  padding-top: 80px;
}

.pt-90 {
  padding-top: 90px;
}

.pt-100 {
  padding-top: 100px;
}

.pt-110 {
  padding-top: 110px;
}

.pt-120 {
  padding-top: 120px;
}

.pb-0 {
  padding-bottom: 0px;
}

.pb-10 {
  padding-bottom: 10px;
}

.pb-20 {
  padding-bottom: 20px;
}

.pb-30 {
  padding-bottom: 30px;
}

.pb-40 {
  padding-bottom: 40px;
}

.pb-50 {
  padding-bottom: 50px;
}

.pb-60 {
  padding-bottom: 60px;
}

.pb-70 {
  padding-bottom: 70px;
}

.pb-80 {
  padding-bottom: 80px;
}

.pb-90 {
  padding-bottom: 90px;
}

.pb-100 {
  padding-bottom: 100px;
}

.pb-110 {
  padding-bottom: 110px;
}

.pb-120 {
  padding-bottom: 120px;
}

.py-80 {
  padding: 80px 0;
}

.py-90 {
  padding: 90px 0;
}

.py-100 {
  padding: 100px 0;
}

.py-110 {
  padding: 110px 0;
}

.py-120 {
  padding: 120px 0;
}

.mt-0 {
  margin-top: 0px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-50 {
  margin-top: 50px;
}

.mt-60 {
  margin-top: 60px;
}

.mt-70 {
  margin-top: 70px;
}

.mt-80 {
  margin-top: 80px;
}

.mt-90 {
  margin-top: 90px;
}

.mt-100 {
  margin-top: 100px;
}

.mt-110 {
  margin-top: 110px;
}

.mt-120 {
  margin-top: 120px;
}

.mb-0 {
  margin-bottom: 0px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mb-50 {
  margin-bottom: 50px;
}

.mb-60 {
  margin-bottom: 60px;
}

.mb-70 {
  margin-bottom: 70px;
}

.mb-80 {
  margin-bottom: 80px;
}

.mb-90 {
  margin-bottom: 90px;
}

.mb-100 {
  margin-bottom: 100px;
}

.mb-110 {
  margin-bottom: 110px;
}

.mb-120 {
  margin-bottom: 120px;
}

.my-80 {
  margin: 80px 0;
}

.my-90 {
  margin: 90px 0;
}

.my-100 {
  margin: 100px 0;
}

.my-110 {
  margin: 110px 0;
}

.my-120 {
  margin: 120px 0;
}




/*====================
6. Preloader
======================*/

.preloader {
  position: fixed;
  width: 100%;
  height: 100%;
  background: var(--theme-color);
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader-ripple {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.loader-ripple div {
  position: absolute;
  border: 4px solid var(--color-white);
  opacity: 1;
  border-radius: 50%;
  animation: loader-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.loader-ripple div:nth-child(2) {
  animation-delay: -0.5s;
}

@keyframes loader-ripple {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }

  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}




/*====================
7. Bs custom css
======================*/

/* custom form */
.form-group {
  margin-bottom: 20px;
}

.form-group .form-label{
  color: var(--color-dark);
}

/* Form Inputs - Theme-aware */
input,
textarea,
select,
.form-group .form-control,
.form-group .form-select {
  padding: 14px 20px 14px 20px;
  border-radius: 15px;
  background-color: var(--surface);
  color: var(--text-primary);
  border: 1px solid var(--border);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.form-group .form-control::placeholder,
textarea::placeholder,
input::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

.form-group .form-control:focus,
.form-group .form-select:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 .25rem rgba(244, 163, 0, .25);
  outline: none;
  background-color: var(--surface);
  color: var(--text-primary);
}

.form-group .form-icon {
  position: relative;
}

.form-group .form-icon i {
  position: absolute;
  top: 19px;
  left: 20px;
  color: var(--icon);
  z-index: 1;
}

.form-group .form-icon .form-control,
.form-group .form-icon .form-select {
  padding-left: 50px;
}

.form-check {
  margin-bottom: 20px;
}

.form-check .form-check-input {
  border-radius: 6px;
  margin-top: 6.5px;
  border-color: var(--border);
  background-color: var(--surface);
}

.form-check .form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}

.form-check .form-check-label {
  color: var(--text-primary);
}

.form-check .form-check-input:checked{
  background-color: var(--theme-color);
  border-color: var(--theme-color)
}

.form-check .form-check-input:focus{
  border-color: var(--theme-color);
  box-shadow: 0 0 0 .25rem rgba(249, 92, 20, .25)
}



/*====================
8. Container
======================*/

@media (min-width: 1200px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl {
    max-width: 1200px;
  }
}



/*====================
9. Nice select css
======================*/

.nice-select{
  width: 100%;
  height: 54px;
  line-height: 54px;
  border-radius: 15px;
  font-size: 16px;
  color: var(--color-dark);
  margin-bottom: 20px;
  border-color: var(--border-info-color);
}

.nice-select::after{
  width: 9px;
  height: 9px;
  right: 20px;
  margin-top: -6.5px
}

.nice-select:focus{
  border-color: var(--theme-color);
  box-shadow: 0 0 0 .25rem rgba(249, 92, 20, .25)
}

.nice-select .list{
  width: 100%;
  border: none;
  border-radius: 15px;
  padding: 10px;
  box-shadow: 0 0 40px 5px rgb(0 0 0 / 5%);
}

.nice-select .option.focus,
.nice-select .option.selected.focus,
.nice-select .option:hover {
  border-radius: 10px;
  background: var(--theme-bg-light);
  color: var(--theme-color);
}

.form-icon .nice-select{
  padding-left: 50px;
}



/*===================
10. Play btn
=====================*/

.play-btn {
  display: inline-block;
  padding: 0;
  height: 75px;
  width: 75px;
  line-height: 75px;
  font-size: 20px;
  text-align: center;
  background: var(--theme-color);
  color: var(--color-white) !important;
  position: absolute;
  border-radius: 50%;
  z-index: 1;
}

.play-btn i::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: var(--theme-color);
  border-radius: 50px;
  animation: ripple-wave 1s linear infinite;
  -webkit-transform: scale(1);
  transform: scale(1);
  transition: all 0.5s ease-in-out;
}

@keyframes ripple-wave {
  0% {
    opacity: 0.8;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(2);
    transform: scale(2);
  }
}



/*====================
11. Site title css
======================*/

.site-heading {
  margin-bottom: 50px;
  position: relative;
  z-index: 1;
}

.site-title-tagline {
  display: inline-block;
  color: var(--color-white);
  font-weight: 500;
  text-transform: capitalize;
  font-size: 18px;
  background: var(--theme-color);
  border-radius: 50px;
  padding: 2px 15px 2px 3px;
  margin-bottom: 15px;
}

.site-title-tagline.light{
  background: var(--color-white);
}

.site-title-tagline i{
  font-size: 16px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  background: var(--color-white);
  color: var(--theme-color);
  text-align: center;
  border-radius: 50px;
  margin-right: 5px;
}

.site-title {
  font-weight: 700;
  text-transform: capitalize;
  font-size: 45px;
  color: var(--text-primary) !important;
  margin-bottom: 0;
}

/* Dark sections - site-title must be white */
.sa-bg .site-title,
.service-area.sa-bg .site-title,
.sa-bg .site-heading .site-title,
.service-area.sa-bg .site-heading .site-title {
  color: #ffffff !important;
}

.site-title span{
  color: var(--theme-color);
}

.site-heading p {
  margin-top: 15px;
}

.heading-divider {
  display: inline-block;
  position: relative;
  border-bottom: 4px solid var(--theme-color);
  width: 90px;
  height: 4px;
  border-radius: 50px;
}

.heading-divider:after {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  height: 6px;
  width: 15px;
  border-radius: 0px;
  background-color: var(--color-white);
  -webkit-animation: heading-move 5s infinite linear;
  animation: heading-move 5s infinite linear;
}

@-webkit-keyframes heading-move {
  0% {
    transform: translateX(-1px);
  }
  50% {
    transform: translateX(75px);
  }
  100% {
    transform: translateX(-1px);
  }
}

@keyframes heading-move {
  0% {
    transform: translateX(-1px);
  }
  50% {
    transform: translateX(75px);
  }
  100% {
    transform: translateX(-1px);
  }
}



/*====================
12. Theme button
======================*/

/* Primary Buttons - Use accent color with black text in light mode, white text in dark mode */
.theme-btn,
.theme-btn2,
button[type="submit"],
.btn-primary {
  font-size: 16px;
  padding: 10px 20px;
  transition: all 0.5s;
  text-transform: capitalize;
  position: relative;
  border-radius: 10px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  border: 2px solid var(--accent);
  background: var(--accent);
  box-shadow: var(--box-shadow);
  z-index: 1;
}

/* Light mode buttons - black text on orange */
:root:not([data-theme="dark"]) .theme-btn,
:root:not([data-theme="dark"]) .theme-btn2,
:root:not([data-theme="dark"]) button[type="submit"],
:root:not([data-theme="dark"]) .btn-primary {
  color: #000000 !important;
}

/* Dark mode buttons - white text on orange */
[data-theme="dark"] .theme-btn,
[data-theme="dark"] .theme-btn2,
[data-theme="dark"] button[type="submit"],
[data-theme="dark"] .btn-primary {
  color: #ffffff !important;
}

.theme-btn::before,
.theme-btn2::before {
  content: "";
  height: 300px;
  width: 300px;
  background: var(--accent-hover);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%) scale(0);
  transition: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: -1;
}

.theme-btn:hover,
.theme-btn2:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

:root:not([data-theme="dark"]) .theme-btn:hover,
:root:not([data-theme="dark"]) .theme-btn2:hover {
  color: #000000 !important;
}

[data-theme="dark"] .theme-btn:hover,
[data-theme="dark"] .theme-btn2:hover {
  color: #ffffff !important;
}

.theme-btn:hover::before,
.theme-btn2:hover::before {
  transform: translateY(-50%) translateX(-50%) scale(1);
}

.theme-btn i,
.theme-btn2 i {
  margin-left: 8px;
  transform: rotate(-40deg);
  transition: var(--transition2);
  color: currentColor;
}

.theme-btn:hover i,
.theme-btn2:hover i {
  transform: rotate(0deg);
}

.theme-btn span,
.theme-btn2 span {
  margin-right: 5px;
}

.theme-btn2 {
  background: var(--accent);
  border-color: var(--accent);
}

.theme-btn2::before {
  background: var(--accent-hover);
}



/*====================
13. Header top css
======================*/

/* Header Top - Theme-aware */
.header-top {
  padding: 10px 0;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  position: relative;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.header-top::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40%;
  background: var(--accent);
  opacity: 0.1;
}

/* Header top - match dark style in light mode */
[data-theme="light"] .header-top,
:root:not([data-theme="dark"]) .header-top {
  background: #0b0b0b;
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

[data-theme="light"] .header-top::before,
:root:not([data-theme="dark"]) .header-top::before {
  opacity: 0.08;
}

[data-theme="light"] .header-top-list a,
[data-theme="light"] .header-top-social span,
[data-theme="light"] .header-top-social a,
:root:not([data-theme="dark"]) .header-top-list a,
:root:not([data-theme="dark"]) .header-top-social span,
:root:not([data-theme="dark"]) .header-top-social a {
  color: #ffffff;
}

[data-theme="light"] .header-top-list a i,
[data-theme="light"] .header-top-right .header-top-list i,
:root:not([data-theme="dark"]) .header-top-list a i,
:root:not([data-theme="dark"]) .header-top-right .header-top-list i {
  color: #ffffff;
}

[data-theme="light"] .header-top-lang .top-lang,
:root:not([data-theme="dark"]) .header-top-lang .top-lang {
  color: #ffffff;
}

/* Header top text alignment in light mode */
[data-theme="light"] .header-top-list ul,
:root:not([data-theme="dark"]) .header-top-list ul {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

[data-theme="light"] .header-top-list a,
:root:not([data-theme="dark"]) .header-top-list a {
  display: inline-flex;
  align-items: center;
}

[data-theme="light"] .header-top-social a,
[data-theme="light"] .header-top-social span,
:root:not([data-theme="dark"]) .header-top-social a,
:root:not([data-theme="dark"]) .header-top-social span {
  color: #ffffff;
}

/* Light mode header-top: match dark mode layout */
[data-theme="light"] .header-top-wrap,
:root:not([data-theme="dark"]) .header-top-wrap {
  align-items: center;
}

[data-theme="light"] .header-top-list ul,
:root:not([data-theme="dark"]) .header-top-list ul {
  flex-direction: row;
  align-items: center;
  gap: 25px;
}

[data-theme="light"] .header-top-list ul li,
:root:not([data-theme="dark"]) .header-top-list ul li {
  margin-right: 0;
}

.header-top-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative;
}

.header-top-list ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 25px;
}

.header-top-list a {
  color: var(--text-secondary);
  font-weight: 500;
  transition: color 0.3s ease;
}

.header-top-list a:hover {
  color: var(--accent);
}

.header-top-list a i {
  color: var(--icon);
  margin-right: 5px;
  transition: color 0.3s ease;
}

.header-top-right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.header-top-right .header-top-list i {
  color: var(--icon);
}

.header-top-social span {
  color: var(--text-secondary);
}

.header-top-social a {
  color: var(--icon);
  font-size: 16px;
  text-align: center;
  margin-left: 14px;
  transition: var(--transition);
}

.header-top-social a:hover {
  color: var(--accent);
}

.header-top-lang .top-lang {
  color: var(--text-secondary);
}

.header-top-lang .dropdown-menu {
  min-width: 60px;
  border-radius: 15px;
  padding: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--box-shadow);
}

.header-top-lang .dropdown-item {
  color: var(--text-primary);
  border-radius: 10px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.header-top-lang .dropdown-item:hover {
  background: var(--accent);
  color: #000000;
}

@media all and (max-width: 1199px) {
  .header-top-list ul {
    gap: 10px;
  }

  .header-top-social a {
    width: 34px;
    height: 34px;
    line-height: 37px;
    margin-left: 0;
  }

  .header-top-left {
    margin-right: 5px;
  }
}

@media all and (max-width: 991px) {
  .header-top-list ul {
    gap: 0px;
  }

  .header-top-list ul li{
    margin-right: 10px;
  }

  .header-top-list ul li:last-child{
    display: none;
  }

  .header-top-lang .dropdown-toggle::after{
    margin-top: 12px;
  }

  .header-top-social span{
    display: none;
  }
}



/*====================
14. Navbar css
======================*/

.navbar {
  background: transparent;
  padding-top: 0px;
  padding-bottom: 0px;
  z-index: 4;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Light Mode Navigation */
[data-theme="light"] .navbar.fixed-top,
:root:not([data-theme="dark"]) .navbar.fixed-top {
  position: fixed;
  background: var(--bg-primary) !important;
  box-shadow: var(--box-shadow2);
  animation: slide-down 0.7s;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Dark Mode Navigation */
[data-theme="dark"] .navbar.fixed-top {
  position: fixed;
  background: var(--bg-primary) !important;
  box-shadow: var(--box-shadow2);
  animation: slide-down 0.7s;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Hero page navbar - transparent when hero is in view */
.navbar.fixed-top.navbar--hero-page {
  background: transparent;
  box-shadow: none;
  animation: none;
}

.navbar.fixed-top.navbar--hero-page.navbar--scrolled {
  background: var(--color-white);
  box-shadow: var(--box-shadow2);
  animation: slide-down 0.3s;
}

@keyframes slide-down {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}

.navbar .navbar-brand .logo-display {
  display: block;
}

.navbar .navbar-brand .logo-scrolled {
  display: none;
}

.navbar.fixed-top .navbar-brand .logo-display {
  display: block;
}

.navbar.fixed-top .navbar-brand .logo-scrolled {
  display: none;
}

/* Hero page navbar logo switching - transparent = light logo, scrolled = dark logo */
.navbar.fixed-top.navbar--hero-page .navbar-brand .logo-display {
  display: block;
}

.navbar.fixed-top.navbar--hero-page .navbar-brand .logo-scrolled {
  display: none;
}

.navbar.fixed-top.navbar--hero-page.navbar--scrolled .navbar-brand .logo-display {
  display: block;
}

.navbar.fixed-top.navbar--hero-page.navbar--scrolled .navbar-brand .logo-scrolled {
  display: none;
}

/* Ensure both logos have same dimensions */
.navbar-brand .logo-display,
.navbar-brand .logo-scrolled {
  width: 170px;
  height: auto;
}

.navbar-brand {
  margin-right: 0;
}

.navbar-brand img {
  width: 170px;
}

.navbar .dropdown-toggle::after {
  display: inline-block;
  margin-left: 5px;
  vertical-align: baseline;
  font-family: 'Font Awesome 6 Pro';
  content: "\f107";
  font-weight: 600;
  border: none;
  font-size: 14px;
}

@media all and (min-width: 992px) {

  .navbar .nav-item .nav-link {
    margin-right: 22px;
    padding: 30px 0 30px 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary) !important;
    text-transform: capitalize;
  }

  .navbar.fixed-top .nav-item .nav-link{
    color: var(--text-primary) !important;
  }
  
  /* Light Mode Nav Links */
  [data-theme="light"] .navbar .nav-item .nav-link,
  [data-theme="light"] .navbar.fixed-top .nav-item .nav-link,
  :root:not([data-theme="dark"]) .navbar .nav-item .nav-link,
  :root:not([data-theme="dark"]) .navbar.fixed-top .nav-item .nav-link {
    color: var(--text-primary) !important;
  }
  
  /* Dark Mode Nav Links */
  [data-theme="dark"] .navbar .nav-item .nav-link,
  [data-theme="dark"] .navbar.fixed-top .nav-item .nav-link {
    color: var(--text-primary) !important;
  }

  .navbar .nav-item .nav-link.active,
  .navbar .nav-item:hover .nav-link {
    color: var(--accent);
  }

  .navbar .nav-item:last-child .nav-link {
    margin-right: 0;
  }

  /* Theme Toggle Button */
  .theme-toggle-btn {
    display: inline-block;
  }
  
  .theme-toggle {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--icon);
    transition: all 0.3s ease;
    cursor: pointer;
  }
  
  .theme-toggle:hover {
    background: var(--surface);
    border-color: var(--accent);
    color: var(--accent);
  }
  
  .theme-toggle i {
    font-size: 18px;
    color: currentColor;
  }

  .navbar .nav-item .dropdown-menu {
    display: block;
    padding: 10px;
    margin-top: 0;
    left: -15px;
    border-radius: 15px;
    border: 1px solid var(--border);
    background: var(--surface) !important;
    width: 220px;
    box-shadow: var(--box-shadow);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition2);
  }

  .navbar .nav-item .dropdown-menu .dropdown-item {
    font-size: 16px;
    padding: 6px 15px;
    font-weight: 500;
    color: var(--text-primary) !important;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    text-transform: capitalize;
    transition: var(--transition2);
    z-index: 1;
  }

  .navbar .nav-item .dropdown-menu .dropdown-item:hover,
  .navbar .nav-item .dropdown-menu .dropdown-item.active {
    background: var(--accent);
    color: #000000 !important;
    padding-left: 25px;
  }

  .navbar .nav-item .dropdown-menu .dropdown-item::before {
    content: "\f061";
    position: absolute;
    font-family: "Font Awesome 6 Pro";
    left: -15px;
    top: 6px;
    color: var(--color-white);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition2);
    z-index: -1;
  }

  .navbar .nav-item .dropdown-menu .dropdown-item:hover::before {
    left: 0;
    opacity: 1;
    visibility: visible;
  }



  /* Force dark dropdown background for "Who We Serve" */
  .navbar .nav-item .dropdown-menu {
    background: #0b0b0b !important;
    border-color: rgba(255, 255, 255, 0.08);
  }

  .navbar .nav-item .dropdown-menu .dropdown-item {
    color: #ffffff !important;
  }

  .navbar .nav-item:hover .dropdown-menu {
    transition: .3s;
    opacity: 1;
    visibility: visible;
    top: 100%;
    transform: rotateX(0deg);
  }

  .navbar .dropdown-menu-end {
    right: 0;
    left: auto;
  }

  .navbar .dropdown-menu.fade-down {
    top: 80%;
    transform: rotateX(-75deg);
    transform-origin: 0% 0%;
  }

  .navbar .dropdown-menu.fade-up {
    top: 140%;
  }

  /* nav right */
  .nav-right {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin-left: 45px;
  }

  .nav-right-link {
    position: relative;
    font-size: 20px;
    color: var(--color-dark);
    border: none;
    padding-right: 0;
    background: transparent;
    transition: var(--transition);
  }

  .nav-right-link:hover {
    color: var(--theme-color);
  }

  .navbar.fixed-top .nav-right-link{
    color: var(--color-dark);
  }

  .navbar.fixed-top .nav-right-link:hover{
    color: var(--theme-color);
  }

  .nav-right .call-wrap{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
  }

  .nav-right .call-wrap .icon{
    width: 45px;
    height: 45px;
    line-height: 46px;
    border-radius: 50px;
    background: var(--theme-color);
    color: var(--color-white);
    text-align: center;
    font-size: 18px;
    margin-top: 5px;
  }

  .nav-right .call-wrap .content span{
   color: var(--theme-color);
   font-weight: 500;
  }

  .nav-right .call-wrap .content h6 a{
    color: var(--color-dark);
    font-weight: 800;
  }

  .nav-right .sidebar-btn span{
    display: block;
    width: 24px;
    border-bottom: 3px solid var(--color-dark);
    border-radius: 50px;
    margin-top: 6px;
    margin-left: auto;
    transition: var(--transition);
  }

  .nav-right .sidebar-btn span:first-child{
    width: 10px;
    margin-top: 0;
  }

  .nav-right .sidebar-btn span:nth-child(3){
    width: 15px;
  }

  /* navbar light */
  .navbar.light .nav-item .nav-link{
    color: var(--color-white);
  }

  .navbar.light.fixed-top .nav-item .nav-link{
    color: var(--color-dark);
  }

  .navbar.light .nav-item .nav-link.active,
  .navbar.light .nav-item:hover .nav-link {
    color: var(--theme-color);
  }

  .navbar.light .nav-right-link{
    color: var(--color-white);
  }

  .navbar.light.fixed-top .nav-right-link{
    color: var(--color-dark);
  }

  .navbar.light .nav-right-link:hover{
    color: var(--theme-color);
  }

  .navbar.light .nav-right .sidebar-btn span{
    border-color: var(--color-white);
  }

  .navbar.light.fixed-top .nav-right .sidebar-btn span{
    border-color: var(--color-dark);
  }
}

@media all and (max-width: 1199px) {
  .navbar .nav-item .nav-link {
    margin-right: 15px;
  }

  .nav-right {
    margin-left: 25px;
  }

  .nav-right .sidebar-btn,
  .nav-right .call-wrap{
    display: none;
  }
}


/* navbar mobile menu */
.navbar .mobile-menu-right {
  display: none;
}

@media all and (max-width: 991px) {
  .navbar {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .navbar-brand img,
  .navbar-brand .logo-display,
  .navbar-brand .logo-scrolled {
    width: 130px;
  }

  .navbar .offcanvas{
    width: 300px;
    background: #0b0b0b;
    color: #ffffff;
  }

  .navbar .offcanvas .nav-link,
  .navbar .offcanvas .dropdown-item {
    color: #ffffff !important;
  }

  .navbar .offcanvas .dropdown-menu {
    background: #0b0b0b !important;
    border-color: rgba(255, 255, 255, 0.1);
  }

  .navbar .offcanvas .dropdown-item:hover,
  .navbar .offcanvas .dropdown-item.active {
    color: #000000 !important;
  }

  .navbar .offcanvas-header .btn-close{
    background: var(--color-red);
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50px;
    color: var(--color-white);
    font-size: 18px;
    box-shadow: none;
    opacity: 1;
  }

  .navbar .offcanvas-brand{
    width: 150px;
  }

  .navbar .offcanvas-brand img {
    filter: brightness(0) invert(1);
  }

  .navbar .nav-item .nav-link {
    color:  var(--color-dark);
    font-weight: 700;
    margin-right: 0px;
    transition: var(--transition);
  }

  .navbar .nav-item .nav-link:hover {
    color: var(--theme-color);
  }

  .navbar .nav-item .dropdown-menu {
    border-radius: 15px;
  }

  .navbar .nav-item .dropdown-toggle::after {
    float: right;
    margin-top: 2.5px;
  }

  .navbar-toggler {
    padding: 0;
    border: none;
  }

  .navbar-toggler:focus {
    outline: none;
    box-shadow: none;
  }

  .navbar-toggler span{
    display: block;
    width: 22px;
    border-bottom: 3px solid var(--color-dark);
    border-radius: 50px;
    margin-top: 5px;
  }

  .navbar-toggler span:first-child{
    margin-top: 0;
  }

  .navbar-toggler span:nth-child(2){
    width: 15px;
  }

  .navbar .mobile-menu-right {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .navbar .mobile-menu-right .nav-right-link {
    background: transparent;
    border: none;
    font-size: 20px;
    color: var(--color-dark);
  }

  .navbar .mobile-menu-right .nav-right-link:hover{
    color: var(--theme-color);
  }

  .nav-right {
    display: none;
  }

  /* navbar light */
  .navbar.light .navbar-toggler span{
    border-color: var(--color-white);
  }

  .navbar.light.fixed-top .navbar-toggler span{
    border-color: var(--color-dark);
  }

  .navbar.light .mobile-menu-right .nav-right-link {
    color: var(--color-white);
  }

  .navbar.light.fixed-top .mobile-menu-right .nav-right-link {
    color: var(--color-dark);
  }

  .navbar.light .mobile-menu-right .nav-right-link:hover{
    color: var(--theme-color);
  }
}



/*==============================
15. Navbar multi level dropdown
================================*/

.navbar .nav-item .dropdown-submenu {
  position: relative;
}

.navbar .nav-item .dropdown-submenu .dropdown-menu::before {
  display: none;
}

.navbar .nav-item .dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 15px;
  top: 8px;
  font-weight: 600;
}

.navbar .nav-item .dropdown-submenu a:hover {
  background: transparent;
  color: var(--color-white);
}

.navbar .nav-item .dropdown-submenu a:focus{
  background: transparent;
}

.navbar .nav-item .dropdown-submenu .dropdown-menu {
  top: 120%;
  left: 100%;
  opacity: 0;
  visibility: hidden;
}

.navbar .nav-item .dropdown-submenu:hover .dropdown-menu {
  top: 0;
  opacity: 1;
  visibility: visible;
}

@media all and (max-width: 991px) {
  .navbar .nav-item .dropdown-menu .dropdown-item{
    color: var(--color-dark)
  }

  .navbar .nav-item .dropdown-submenu .dropdown-menu {
    margin: 0 17px;
  }

  .navbar .nav-item .dropdown-submenu .dropdown-menu {
    opacity: unset;
    visibility: unset;
  }

  .navbar .nav-item .dropdown-submenu a::after {
    top: 3px;
  }

  .navbar .nav-item .dropdown-submenu a:hover {
    color: var(--theme-color);
  }
}



/*============================
16. Navbar mega menu
==============================*/

@media all and (min-width: 992px){
  .nav-item.mega-menu {
    position: static;
  }
  
  .navbar .nav-item.mega-menu .dropdown-menu{
    width: 98.2%;
    left: 12px;
  } 

  .navbar .mega-menu .mega-content{
    padding: 12px;
  }

  .navbar .mega-menu .mega-menu-title{
    font-size: 17px;
    margin-bottom: 15px;
    color: var(--color-dark);
  }

  .navbar .mega-menu-img img{
    border-radius: 15px;
  }

  .navbar .nav-item.mega-menu .dropdown-menu .dropdown-item{
    padding-left: 0;
  }

  .navbar .nav-item.mega-menu .dropdown-menu .dropdown-item::before{
    left: 0;
  }

  .navbar .nav-item.mega-menu .dropdown-menu .dropdown-item:hover{
    padding-left: 15px;
  }

  /* mega-menu small */
  .navbar .nav-item.mega-menu.small {
    position: relative;
  }

  .navbar .mega-menu.small .dropdown-menu{
    width: 340px;
    left: 50%;
    transform: translateX(-50%);
  } 
}


@media all and (max-width: 991px){
  .navbar .mega-menu-img{
    display: none;
  }

  .navbar .mega-menu .mega-content h5{
    margin: 15px 0;
  }
}




/* ======================
17. Search popup
====================== */

.search-popup {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100%;
  z-index: 99999;
  margin-top: -540px;
  transform: translateY(-100%);
  background-color: rgba(0, 0, 0, .95);
  transition: all 1500ms cubic-bezier(0.860, 0.000, 0.070, 1.000);
  transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
}

.search-active .search-popup {
  transform: translateY(0%);
  margin-top: 0;
}

.search-popup .close-search {
  position: absolute;
  left: 0;
  right: 0;
  top: 75%;
  border: none;
  margin: 0 auto;
  margin-top: -200px;
  border-radius: 50px;
  text-align: center;
  background: var(--color-red);
  text-align: center;
  width: 50px;
  height: 50px;
  color: var(--color-white);
  font-size: 20px;
  cursor: pointer;
  box-shadow: var(--box-shadow);
  transition: all 500ms ease;
  opacity: 0;
  visibility: hidden;
}

.search-active .search-popup .close-search {
  visibility: visible;
  opacity: 1;
  top: 50%;
  transition-delay: 1500ms;
}

.search-active .search-popup .close-search span{
  transition: var(--transition);
}

.search-active .search-popup .close-search:hover span{
  transform: rotate(180deg);
}

.search-popup form {
  position: absolute;
  max-width: 700px;
  top: 50%;
  left: 15px;
  right: 15px;
  margin: -35px auto 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: all 300ms ease;
}

.search-active .search-popup form {
  transform: scaleX(1);
  transition-delay: 1200ms;
}

.search-popup .form-group {
  position: relative;
  margin: 0px;
  overflow: hidden;
}

.search-popup .form-control {
  position: relative;
  width: 100%;
  height: 70px;
  outline: none;
  border-radius: 0px;
  border: none;
  border-bottom: 2px solid var(--color-white);
  background-color: transparent;
  color: var(--color-white);
  font-size: 40px;
  padding: 0 70px 0 20px;
  transition: all 500ms ease;
  text-transform: capitalize;
}

.search-popup .form-control::placeholder{
  color: var(--color-white);
  font-size: 40px;
}

.search-popup .form-group button {
  position: absolute;
  right: 5px;
  top: 5px;
  border-radius: 50px;
  background: transparent;
  text-align: center;
  font-size: 30px;
  color: var(--color-white);
  height: 50px;
  width: 50px;
  border: none;
  cursor: pointer;
  transition: all 500ms ease;
}

.search-popup .form-group button:hover{
  color: var(--theme-color);
}



/*====================
18. Sidebar popup css 
======================*/

.sidebar-popup{
  padding: 20px;
}

.sidebar-popup .btn-close{
  background: var(--theme-color);
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border-radius: 50px;
  color: var(--color-white);
  font-size: 20px;
  transition: var(--transition);
  box-shadow: var(--box-shadow);
  opacity: 1;
}

.sidebar-popup .btn-close:hover{
  background: var(--color-red);
}

.sidebar-popup .btn-close i{
  transition: var(--transition);
}

.sidebar-popup .btn-close:hover i{
  transform: rotate(180deg);
}

.sidebar-popup-logo img{
  width: 180px;
}

.sidebar-popup-about{
  margin-top: 10px;
}

.sidebar-popup-about h4{
  margin-bottom: 10px;
  font-weight: 700;
}

.sidebar-popup-contact{
  margin-top: 20px;
}

.sidebar-popup-contact h4{
  margin-bottom: 15px;
  font-weight: 700;
}

.sidebar-popup-contact li{
  display: flex;
  gap: 12px;
  margin-bottom: 15px;
}

.sidebar-popup-contact li .icon{
  width: 35px;
  height: 35px;
  line-height: 35px;
  color: var(--color-white);
  background: var(--theme-color);
  text-align: center;
  border-radius: 50px;
}

.sidebar-popup-contact li a:hover{
  color: var(--theme-color);
}

.sidebar-popup-social{
  margin-top: 25px;
}

.sidebar-popup-social h4{
  margin-bottom: 20px;
  font-weight: 700;
}

.sidebar-popup-social a{
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50px;
  margin-right: 8px;
  background: var(--theme-color);
  color: var(--color-white);
  box-shadow: var(--box-shadow);
}

.sidebar-popup-social a:hover{
  background: var(--color-dark);
}




/*====================
19. Main section css 
======================*/

.main {
  margin-top: 0rem;
}



/*====================
20. Hero css 
======================*/

.hero-single {
  padding-top: 120px;
  padding-bottom: 150px;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.hero-single .container .row {
  align-items: center;
}

.hero-single .container .row [class*="col-"] {
  display: flex;
  align-items: center;
}

.hero-single::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: -0.5px;
  background: linear-gradient(to bottom right, rgba(23, 42, 56, 1) 0%, rgba(23, 42, 56, 0) 100%);
  z-index: -1;
}

.hero-single .hero-content {
  height: 100%;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-single .hero-content .hero-sub-title {
  display: inline-block;
  color: var(--color-white);
  font-size: 24px;
  letter-spacing: 6px;
  font-weight: 600;
  position: relative;
  text-transform: uppercase;
  text-align: center;
}

.hero-single .hero-content .hero-sub-title::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 15px;
  background: var(--theme-color);
  z-index: -1;
}

.hero-single .hero-content .hero-title {
  color: var(--color-white);
  font-size: 60px;
  font-weight: 600;
  margin: 20px 0;
  text-transform: capitalize;
  text-align: center;
}

.hero-single .hero-content .hero-title span{
  color: var(--theme-color);
}

.hero-single .hero-content p {
  color: var(--color-white);
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
  margin-bottom: 20px;
  text-align: center;
}

.hero-single .hero-content .hero-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 35px;
  flex-wrap: wrap;
}

/* Hero Image Styling */
.hero-single .hero-img {
  position: relative;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  align-items: center;
  justify-content: center;
}

.hero-single .hero-img img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 15px;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

.hero-single .hero-img .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: var(--theme-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: 24px;
  z-index: 2;
  transition: var(--transition);
}

.hero-single .hero-img .play-btn:hover {
  background: var(--color-dark);
  transform: translate(-50%, -50%) scale(1.1);
}

@media all and (max-width: 1199px) {
  .hero-single .hero-content .hero-title {
    font-size: 37px;
  }
}

@media all and (max-width: 991px) {
  .hero-single .hero-content .hero-title {
    font-size: 50px;
  }
}

@media all and (max-width: 767px) {
  .hero-single .hero-content .hero-sub-title {
    font-size: 18px;
  }

  .hero-single .hero-content .hero-btn {
    gap: 1rem;
  }
}


/* hero-slider */
.hero-slider .owl-nav {
  margin-top: 0px;
}

.hero-slider .owl-nav button i{
  display: inline-block;
  height: 55px;
  width: 55px;
  line-height: 55px;
  color: var(--theme-color);
  font-size: 25px;
  text-align: center;
  background: var(--color-white);
  border-radius: 50px;
  cursor: pointer;
  transition: var(--transition);
}

.hero-slider .owl-nav button:hover i{
  background: var(--theme-color);
  color: var(--color-white);
}

.hero-slider .owl-nav .owl-prev {
  left: 40px;
}

.hero-slider .owl-nav .owl-next {
  right: 40px;
}

.hero-slider .owl-nav .owl-prev,
.hero-slider .owl-nav .owl-next {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

.hero-slider .owl-dots {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  display: none;
}

.hero-slider .owl-dots .owl-dot span {
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: var(--color-white);
  border-radius: 0px;
  border: 3px solid var(--theme-color);
  margin: 5px;
  transition: var(--transition);
}

.hero-slider .owl-dots .owl-dot.active span {
  background-color: var(--theme-color);
}


@media all and (max-width: 1199px) {
  .hero-slider .owl-nav .owl-prev,
  .hero-slider .owl-nav .owl-next {
    top: unset;
    bottom: 45px;
  }

  .hero-slider .owl-nav .owl-prev {
    left: unset;
    right: 120px;
  }

  .hero-slider .owl-nav .owl-next {
    right: 40px;
  }
}



/*====================
21. Breadcrumb css
======================*/

.site-breadcrumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  position: relative;
  padding-top: 120px;
  padding-bottom: 120px;
  z-index: 1;
}

/* Breadcrumb overlay - darker in light mode, lighter in dark mode for contrast */
.site-breadcrumb::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

:root:not([data-theme="dark"]) .site-breadcrumb::before {
  background: rgba(0, 0, 0, 0.7);
  opacity: 1;
}

[data-theme="dark"] .site-breadcrumb::before {
  background: rgba(0, 0, 0, 0.5);
  opacity: 1;
}

.site-breadcrumb .breadcrumb-title {
  font-size: 35px;
  color: var(--color-white);
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: capitalize;
}

.site-breadcrumb .breadcrumb-menu {
  position: relative;
  z-index: 1;
}

.site-breadcrumb .breadcrumb-menu li {
  position: relative;
  display: inline-block;
  margin-left: 25px;
  color: var(--color-white);
  font-weight: 500;
  text-transform: capitalize;
}

.site-breadcrumb .breadcrumb-menu li a {
  color: var(--color-white);
  transition: all 0.5s ease-in-out;
}

.site-breadcrumb .breadcrumb-menu li::before {
  position: absolute;
  content: '\f101';
  font-family: 'Font Awesome 6 Pro';
  right: -21px;
  top: 1px;
  text-align: center;
  font-size: 16px;
  color: var(--color-white);
}

.site-breadcrumb .breadcrumb-menu li:first-child {
  margin-left: 0;
}

.site-breadcrumb .breadcrumb-menu li:last-child:before {
  display: none;
}

.site-breadcrumb .breadcrumb-menu li a:hover {
  color: var(--accent);
}

.site-breadcrumb .breadcrumb-menu li.active {
  color: var(--accent);
}



/* ===================
22. About css 
====================== */


/* =====================
ABOUT AREA LAYOUT FIX - RESTORE GRID STRUCTURE
====================== */

/* Ensure about-area uses proper container structure */
.about-area {
  position: relative;
  background: var(--bg-primary);
}

/* Restore proper row/column structure for about area */
.about-area .row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
  align-items: center;
}

.about-area .row > [class*="col-"] {
  padding-left: 15px;
  padding-right: 15px;
}

/* Left column - image cluster */
.about-left {
  position: relative;
  width: 100%;
  max-width: 100%;
}

/* Image cluster - constrain within container */
.about-img {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

.about-img img {
  border-radius: 100px;
  width: 100%;
  height: auto;
  display: block;
}

.about-img .img-2 {
  margin-left: -20px;
  margin-top: 130px;
  border: 10px solid var(--color-white);
}

.about-img .img-3 {
  margin-top: -20px;
  margin-left: -50px;
  border: 10px solid var(--color-white);
}

/* Experience badge - attached to image cluster */
.about-experience {
  background: var(--theme-color);
  position: absolute;
  right: 0;
  bottom: 20px;
  padding: 14px 25px;
  border-radius: 100px;
  text-align: center;
  border: 10px solid var(--color-white);
  z-index: 2;
  max-width: 200px;
}

/* Right column - content and cards */
.about-right {
  position: relative;
  display: block;
  width: 100%;
}

/* CTA button - stay in layout flow */
.about-right .theme-btn {
  margin-top: 24px;
  display: inline-block;
  position: relative;
}

.about-experience h5{
  color: var(--color-white);
  font-size: 40px;
}

.about-experience p{
  color: var(--color-white);
  font-weight: 600;
}

.about-content {
  margin-top: 25px;
  margin-bottom: 35px;
}

.about-item{
  display: flex;
  gap: 12px;
  border: 1px solid var(--border-info-color);
  border-radius: 20px;
  padding: 15px;
}

.about-item .icon{
  width: 65px;
  height: 65px;
  line-height: 65px;
  text-align: center;
  background: var(--theme-color);
  border-radius: 50px;
}

.about-item .icon img{
  width: 45px;
  filter: brightness(0) invert(1);
}

.about-item .content{
  flex: 1;
}

.about-item .content h6 {
  color: var(--text-primary) !important;
  margin-bottom: 5px;
}

.about-text {
  color: var(--text-secondary) !important;
}

/* Ensure about-item has dark text (it's on white background) */
.about-item,
.about-item h6,
.about-item p,
.about-item .content h6,
.about-item .content p {
  color: var(--text-primary) !important;
}


@media all and (max-width: 991px) {
  .about-right {
    margin-top: 80px;
  }
}

@media all and (max-width: 767px) {
  .about-title {
    font-size: 30px;
  }

  .about-img .img-2{
    margin-top: 60px;
    margin-left: -10px;
  }

  .about-img .img-3{
    margin-left: -30px;
  }

  .about-experience{
    right: -7px;
    bottom: -60px;
  }
}



/*====================
23. Feature css 
======================*/

.feature-area{
  position: relative;
  z-index: 1;
}

.fa-negative{
  margin-top: 0;
}

.feature-item {
  display: flex;
  gap: 14px;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 15px;
  padding: 20px;
  position: relative;
  color: var(--text-secondary) !important;
}

/* Feature items text - use theme tokens */
.feature-item:not(.feature-area.fta-2 .feature-item) h4,
.feature-item:not(.feature-area.fta-2 .feature-item) h1,
.feature-item:not(.feature-area.fta-2 .feature-item) h2,
.feature-item:not(.feature-area.fta-2 .feature-item) h3,
.feature-item:not(.feature-area.fta-2 .feature-item) h5,
.feature-item:not(.feature-area.fta-2 .feature-item) h6,
.feature-item:not(.feature-area.fta-2 .feature-item) .feature-content h4 {
  color: var(--text-primary) !important;
}

.feature-item:not(.feature-area.fta-2 .feature-item) p,
.feature-item:not(.feature-area.fta-2 .feature-item) .feature-content p {
  color: var(--text-secondary) !important;
}

.feature-item::before{
  content: "";
  position: absolute;
  left: 80px;
  right: 80px;
  bottom: -1px;
  border: 4px solid var(--color-white);
  border-radius: 10px 10px 0 0;
}

.feature-item .count {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 50px;
  font-weight: 700;
  color: var(--accent) !important;
  -webkit-text-stroke: 1px var(--accent);
  z-index: 0;
  pointer-events: none;
  opacity: 0.4 !important;
}

.feature-icon{
  position: relative;
}

.feature-icon::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: 50px;
  background: var(--theme-color);
  border-radius: 50px;
}

.feature-icon img {
  width: 60px;
  filter: brightness(0) saturate(100%) invert(68%) sepia(98%) saturate(1000%) hue-rotate(5deg) brightness(1.1) contrast(1.2) !important;
}

.feature-content{
  flex: 1;
  position: relative;
  z-index: 1;
  padding-bottom: 20px;
}

.feature-content h4{
  color: var(--color-white);
}

.feature-content p{
  color: var(--color-white);
  margin-top: 10px;
}

/* feature-area 2 - White cards with dark text */
.feature-area.fta-2 .feature-item{
  background: #ffffff !important;
  padding: 30px;
  box-shadow: var(--box-shadow);
}

/* Feature cards text - Dark text on white cards for visibility */
.feature-area.fta-2 .feature-content h4 {
  color: #0b0b0b !important;
  font-weight: 600;
}

.feature-area.fta-2 .feature-content p {
  color: #000000 !important;
  margin-top: 10px;
  line-height: 1.6;
}

.feature-area.fta-2 .feature-item::before{
  display: none;
}

.feature-area.fta-2 .feature-icon{
  width: 68px;
  height: 68px;
  line-height: 68px;
  text-align: center;
  background: var(--theme-color);
  border-radius: 50px 50px 50px 10px;
  box-shadow: -10px -10px 0 var(--theme-color-light);
}

.feature-area.fta-2 .feature-icon img{
  width: 45px;
}

.feature-area.fta-2 .feature-icon::before{
  display: none;
}

.feature-area.fta-2 .feature-content h4{
  color: #0b0b0b !important;
}

.feature-area.fta-2 .feature-content p{
  color: #000000 !important;
}

@media all and (max-width: 1199px) {
  .fa-negative{
    margin-top: -70px;
  }
}




/* ===================
24. Service css 
====================== */

.sa-bg{
  position: relative;
  background: var(--color-dark);
  z-index: 1;
}

.sa-bg::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: .1;
  z-index: -1;
}

/* =====================
COMPREHENSIVE CARD COMPONENT FIX - GLOBAL TEXT VISIBILITY
====================== */

/* Cards and Service Items - Use theme surface color */
.service-item,
.card,
.feature-item,
.pricing-box,
.pricing-item,
.process-item,
.challenge-item {
  position: relative;
  padding: 20px;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 50px 50px 50px 10px;
  transition: var(--transition);
  color: var(--text-secondary) !important;
}

.service-item:hover,
.card:hover,
.feature-item:hover,
.pricing-item:hover,
.process-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--box-shadow);
}

/* CRITICAL: ALL text inside cards MUST explicitly set color - NO inheritance */
/* Light mode - explicit black */
.service-item h1,
.service-item h2,
.service-item h3,
.service-item h4,
.service-item h5,
.service-item h6,
.service-item .service-title,
.service-item .service-content h4,
.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6,
.card .card-title,
.card .card-header,
.feature-item h1,
.feature-item h2,
.feature-item h3,
.feature-item h4,
.feature-item h5,
.feature-item h6,
.feature-item .feature-content h4,
.pricing-item h1,
.pricing-item h2,
.pricing-item h3,
.pricing-item h4,
.pricing-item h5,
.pricing-item h6,
.pricing-item .pricing-header h5,
.pricing-item .pricing-amount strong,
.process-item h1,
.process-item h2,
.process-item h3,
.process-item h4,
.process-item h5,
.process-item h6,
.process-item .content h4,
.challenge-item h1,
.challenge-item h2,
.challenge-item h3,
.challenge-item h4,
.challenge-item h5,
.challenge-item h6 {
  color: #000000 !important;
}

/* Dark mode override */
[data-theme="dark"] .service-item h1,
[data-theme="dark"] .service-item h2,
[data-theme="dark"] .service-item h3,
[data-theme="dark"] .service-item h4,
[data-theme="dark"] .service-item h5,
[data-theme="dark"] .service-item h6,
[data-theme="dark"] .service-item .service-title,
[data-theme="dark"] .service-item .service-content h4,
[data-theme="dark"] .card h1,
[data-theme="dark"] .card h2,
[data-theme="dark"] .card h3,
[data-theme="dark"] .card h4,
[data-theme="dark"] .card h5,
[data-theme="dark"] .card h6,
[data-theme="dark"] .card .card-title,
[data-theme="dark"] .card .card-header,
[data-theme="dark"] .feature-item h1,
[data-theme="dark"] .feature-item h2,
[data-theme="dark"] .feature-item h3,
[data-theme="dark"] .feature-item h4,
[data-theme="dark"] .feature-item h5,
[data-theme="dark"] .feature-item h6,
[data-theme="dark"] .feature-item .feature-content h4,
[data-theme="dark"] .pricing-item h1,
[data-theme="dark"] .pricing-item h2,
[data-theme="dark"] .pricing-item h3,
[data-theme="dark"] .pricing-item h4,
[data-theme="dark"] .pricing-item h5,
[data-theme="dark"] .pricing-item h6,
[data-theme="dark"] .pricing-item .pricing-header h5,
[data-theme="dark"] .pricing-item .pricing-amount strong,
[data-theme="dark"] .process-item h1,
[data-theme="dark"] .process-item h2,
[data-theme="dark"] .process-item h3,
[data-theme="dark"] .process-item h4,
[data-theme="dark"] .process-item h5,
[data-theme="dark"] .process-item h6,
[data-theme="dark"] .process-item .content h4,
[data-theme="dark"] .challenge-item h1,
[data-theme="dark"] .challenge-item h2,
[data-theme="dark"] .challenge-item h3,
[data-theme="dark"] .challenge-item h4,
[data-theme="dark"] .challenge-item h5,
[data-theme="dark"] .challenge-item h6 {
  color: var(--text-primary) !important;
}

/* Secondary text in cards */
.service-item p,
.service-item .service-text,
.service-item .service-content p,
.service-item span,
.service-item li,
.card p,
.card .card-text,
.card .description,
.card .subtitle,
.card span,
.card li,
.feature-item p,
.feature-item .feature-content p,
.feature-item span,
.feature-item li,
/* Pricing item text - REMOVED (handled by comprehensive fix above) */
/* Process and challenge items - Light mode black, Dark mode theme */
.process-item p,
.process-item .content p,
.process-item span,
.process-item li,
.challenge-item p,
.challenge-item span {
  color: #000000 !important;
}

[data-theme="dark"] .process-item p,
[data-theme="dark"] .process-item .content p,
[data-theme="dark"] .process-item span,
[data-theme="dark"] .process-item li,
[data-theme="dark"] .challenge-item p,
[data-theme="dark"] .challenge-item span {
  color: var(--text-secondary) !important;
}

/* Muted text in cards */
.service-item .muted,
.service-item .text-muted,
.card .muted,
.card .text-muted,
.feature-item .muted,
.feature-item .text-muted,
.pricing-item .muted,
.pricing-item .text-muted,
.process-item .muted,
.process-item .text-muted {
  color: var(--text-muted) !important;
}

.service-item .count {
  position: absolute;
  top: 0px;
  right: 30px;
  font-weight: 800;
  font-size: 70px;
  color: var(--accent);
  -webkit-text-stroke: 1px var(--accent);
  opacity: 0.3;
  z-index: 0;
  pointer-events: none;
}

.service-icon{
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  border-radius: 50px 50px 50px 10px;
  background: var(--theme-color);
  margin-bottom: 30px;
  box-shadow: 10px 10px 0 var(--theme-color-light);
  transition: var(--transition);
}

/* Feature cards - icon + text alignment fixes */
.feature-card {
  text-align: left;
}

.feature-card .icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 30px;
  background: none;
  box-shadow: none;
}

.feature-card .feature-icon-svg {
  width: 40px;
  height: 40px;
  color: var(--accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.feature-card .service-title,
.feature-card .service-content,
.feature-card .service-text,
.feature-card p {
  text-align: left;
}

.feature-card .service-title {
  margin-top: 12px;
}

.feature-card .service-text {
  margin-top: 8px;
  line-height: 1.6;
}

.service-item:hover .service-icon{
  box-shadow: 0px 0px 0 var(--theme-color-light);
}

.service-icon img {
  width: 50px;
  filter: brightness(0) saturate(100%) invert(68%) sepia(98%) saturate(1000%) hue-rotate(5deg) brightness(1.1) contrast(1.2) !important;
}

/* Service content text - explicit colors for white card backgrounds */
.service-item .service-content h4,
.service-item .service-title {
  color: #0b0b0b !important;
}

.service-item .service-content h4 a {
  color: #0b0b0b !important;
}

.service-item .service-content h4 a:hover {
  color: var(--accent) !important;
}

.service-item .service-content p,
.service-item .service-text {
  color: #444444 !important;
  margin-top: 5px;
  margin-bottom: 20px;
}

/* Dark mode override for service items on dark backgrounds */
[data-theme="dark"] .service-area.sa-bg .service-item .service-content h4,
[data-theme="dark"] .service-area.sa-bg .service-item .service-title {
  color: #ffffff !important;
}

[data-theme="dark"] .service-area.sa-bg .service-item .service-content p,
[data-theme="dark"] .service-area.sa-bg .service-item .service-text {
  color: #000000 !important;
}

/* service-area 2 */
.service-area.sa-2 .service-item{
  background: transparent;
  transform: none;
}

.service-area.sa-2 .service-item::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 80%;
  background: var(--color-white);
  border-radius: 40px 40px 40px 10px;
  z-index: -1;
}

.service-area.sa-2 .service-item .count{
  top: unset;
  right: unset;
  left: 18px;
  bottom: -10px;
}

.service-area.sa-2 .service-img img{
  border-radius: 50px;
}

.service-area.sa-2 .service-content{
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.service-area.sa-2 .service-icon{
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-area.sa-2 .service-icon img{
  width: 50px !important;
}

.service-area.sa-2 .service-info{
  flex: 1;
}

/* service-slider */
.service-slider .owl-nav {
  margin-top: 0px;
}

.service-slider .owl-nav button{
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  transition: var(--transition);
}

.service-slider .owl-nav button i{
  display: inline-block;
  height: 48px;
  width: 48px;
  line-height: 48px;
  color: var(--color-white);
  font-size: 25px;
  text-align: center;
  background: var(--theme-color);
  border-radius: 50px;
  cursor: pointer;
  transition: var(--transition);
}

.service-slider .owl-nav button:hover i{
  background: var(--theme-color);
  color: var(--color-white);
} 

.service-slider .owl-nav .owl-prev {
  left: 0px;
  opacity: 0;
}

.service-slider .owl-nav .owl-next {
  right: 0px;
  opacity: 0;
}

.service-slider:hover .owl-nav .owl-prev {
  left: -20px;
  opacity: 1;
}

.service-slider:hover .owl-nav .owl-next {
  right: -20px;
  opacity: 1;
}

@media all and (max-width: 1199px) {
  .service-slider .owl-nav {
    display: none;
  }
}




/* ======================
25. Service single
====================== */

.service-sidebar .widget{
  background: var(--color-white);
  padding: 30px;
  border-radius: 20px;
  margin-bottom: 30px;
  box-shadow: var(--box-shadow);
}

.service-sidebar .widget .title{
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 30px;
}

.service-sidebar .widget .title::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 50px;
  background: var(--theme-color);
  border-radius: 50px;
}

.service-sidebar .category a{
  display: block;
  font-size: 16px;
  color: var(--color-dark);
  font-weight: 500;
  padding-bottom: 7px;
  margin-bottom: 7px;
  border-bottom: 1px solid var(--border-info-color);
}

.service-sidebar .category a:hover{
  color: var(--theme-color);
  padding-left: 5px;
}

.service-sidebar .category a i{
  margin-right: 5px;
}

.service-sidebar .category a:last-child{
  padding: 0;
  margin: 0;
  border-bottom: none;
}

.service-sidebar .service-download a {
  display: block;
  color: var(--color-dark);
  font-weight: 500;
  border: 2px solid var(--theme-color);
  padding: 10px 20px;
  margin-bottom: 20px;
  border-radius: 50px;
  transition: var(--transition);
}

.service-sidebar .service-download a:last-child{
  margin-bottom: 0;
}

.service-sidebar .service-download a:hover{
  background: var(--theme-color);
  color: var(--color-white);
}

.service-sidebar .service-download a i {
  margin-right: 10px;
}

.service-details img{
  border-radius: 30px;
}

.service-details .content h3{
  color: var(--color-dark);
}

.service-details .content .list li{
  font-weight: 500;
  color: var(--color-dark);
  margin-top: 5px;
}

.service-details .content .list i {
  color: var(--theme-color);
  margin-right: 10px;
}



/* ===================
26. Step/process css 
====================== */

.process-item {
  position: relative;
  background: var(--color-white);
  padding: 20px;
  border-radius: 20px;
  box-shadow: var(--box-shadow);
}

.process-item .count {
  display: inline-block;
  font-weight: 800;
  color: var(--text-primary) !important;
  font-size: 16px;
  min-width: 50px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  background: var(--accent) !important;
  padding: 0 12px;
  margin-top: -20px;
  margin-bottom: 10px;
  border-radius: 0 0 50px 50px;
  white-space: nowrap;
  letter-spacing: 0;
}

/* Process item count text - black on orange background for visibility */
.process-item .count {
  color: #000000 !important;
}

.process-item .icon{
  position: absolute;
  right: 0;
  top: 0;
  width: 65px;
  height: 65px;
  line-height: 65px;
  text-align: center;
  background: var(--theme-color);
  border-radius: 50px 10px 50px 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.process-item .icon img {
  width: 40px;
  height: auto;
  filter: brightness(0) saturate(100%) invert(68%) sepia(98%) saturate(1000%) hue-rotate(5deg) brightness(1.1) contrast(1.2) !important;
  display: block;
  margin: 0 auto;
}

.process-item .content {
  position: relative;
  padding-right: 75px;
  min-height: 100px;
}

.process-item .content h4{
  color: #0b0b0b !important;
  margin-bottom: 10px;
  line-height: 1.4;
}

.process-item .content p{
  color: #444444 !important;
  margin-top: 0;
  line-height: 1.6;
}



/* ===================
27. Skill css 
====================== */

.skill-img{
  position: relative;
}

.skill-img::before{
  content: "";
  position: absolute;
  right: 50px;
  bottom: 0;
  width: 80%;
  height: 90%;
  background: var(--theme-color);
  border-radius: 50px;
  transform: rotate(5deg);
  opacity: .2;
  z-index: -1;
}

.skill-img img{
  width: 85%;
  border-radius: 50px;
}

.skill-text{
  margin-top: 10px;
}

.skill-progress{
  margin-top: 25px;
}

.skill-progress .progress-item {
  margin-bottom: 25px;
}

.skill-progress .progress-item:last-child {
  margin-bottom: 0;
}

.skill-progress .progress-item h5 {
  font-size: 16px;
  text-transform: capitalize;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.skill-progress .progress-item .progress {
  height: 8px;
  background-color: var(--theme-bg-light);
  border-radius: 50px;
}

.skill-progress .progress-item .progress .progress-bar {
  background-color: var(--theme-color);
}

@media all and (max-width: 767px) {
  .skill-img::before{
    right: 15px;
  }
}



/*====================
28. Portfolio css 
======================*/

.portfolio-area{
  position: relative;
}

.pa-bg{
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 100%;
  height: 500px;
}

.pa-bg::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 63, 114, .85);
  width: 100%;
  height: 100%;
}

.portfolio-img {
  position: relative;
}

.portfolio-img img{
  border-radius: 50px;
}

.portfolio-img::before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: var(--theme-color);
  border-radius: 50px;
  transform: scaleY(0);
  transition: var(--transition);
}

.portfolio-item:hover .portfolio-img::before {
  opacity: .8;
  transform: scaleY(1);
}

.portfolio-link {
  position: absolute;
  width: 60px;
  height: 60px;
  line-height: 60px;
  color: var(--theme-color);
  background: var(--color-white);
  border-radius: 50px;
  text-align: center;
  left: 50%;
  top: 50%;
  font-size: 28px;
  margin-top: 50px;
  opacity: 0;
  box-shadow: var(--box-shadow);
  transform: translate(-50%, -50%);
  transition-delay: 0.3s;
}

.portfolio-link:hover{
  color: var(--theme-color);
}

.portfolio-item:hover .portfolio-link {
  margin-top: 0px;
  opacity: 1;
}

.portfolio-content{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}

.portfolio-content small{
  text-transform: uppercase;
  font-weight: 600;
  color: var(--theme-color);
  letter-spacing: 2px;
}

.portfolio-content h4 a{
  font-size: 20px;
  color: var(--color-dark);
}

.portfolio-content h4 a:hover{
  color: var(--theme-color);
}

.portfolio-arrow{
  width: 45px;
  height: 45px;
  line-height: 45px;
  background: var(--theme-color);
  color: var(--color-white);
  text-align: center;
  border-radius: 50px;
}

.portfolio-arrow i{
  color: var(--color-white);
  transform: rotate(-45deg);
  transition: var(--transition);
}

.portfolio-arrow:hover i{
  transform: rotate(0);
}

/* portfolio-slider */
.portfolio-slider .owl-nav {
  margin-top: 0px;
}

.portfolio-slider .owl-nav button{
  position: absolute;
  top: 50%;
  margin-top: -35px;
  transform: translate(0, -50%);
  transition: var(--transition);
}

.portfolio-slider .owl-nav button i{
  display: inline-block;
  height: 48px;
  width: 48px;
  line-height: 48px;
  color: var(--color-white);
  font-size: 25px;
  text-align: center;
  background: var(--theme-color);
  border-radius: 50px;
  cursor: pointer;
  transition: var(--transition);
}

.portfolio-slider .owl-nav button:hover i{
  background: var(--theme-color);
  color: var(--color-white);
} 

.portfolio-slider .owl-nav .owl-prev {
  left: 0px;
  opacity: 0;
}

.portfolio-slider .owl-nav .owl-next {
  right: 0px;
  opacity: 0;
}

.portfolio-slider:hover .owl-nav .owl-prev {
  left: -10px;
  opacity: 1;
}

.portfolio-slider:hover .owl-nav .owl-next {
  right: -10px;
  opacity: 1;
}

@media all and (max-width: 1199px) {
  .portfolio-slider .owl-nav {
    display: none;
  }
}



/* ======================
29. Portfolio single
====================== */

.portfolio-sidebar .widget{
  background: var(--color-white);
  padding: 30px;
  border-radius: 20px;
  margin-bottom: 30px;
  box-shadow: var(--box-shadow);
}

.portfolio-sidebar .widget .title{
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 30px;
}

.portfolio-sidebar .widget .title::before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 50px;
  background: var(--theme-color);
  border-radius: 50px;
}

.portfolio-sidebar .list li {
  border-bottom: 1px solid var(--border-info-color);
  display: block;
  margin-bottom: 10px;
  padding-bottom: 10px;
  text-transform: uppercase;
  font-size: 14px;
  color: var(--color-dark);
  font-weight: 600;
  line-height: 33px;
}

.portfolio-sidebar .list li:last-child {
  border-bottom: none;
  padding: 0;
  margin: 0;
}

.portfolio-sidebar .list li span {
  display: block;
  font-weight: normal;
  font-size: 16px;
  margin: 0;
  text-transform: none;
}

.portfolio-sidebar .project h4{
  color: var(--color-white);
  margin-bottom: 25px;
}

.portfolio-sidebar .rating a {
  color: var(--theme-color);
}

.portfolio-sidebar .project{
  background: var(--theme-color);
}

.portfolio-details img{
  border-radius: 30px;
}

.portfolio-details .content h3{
  color: var(--color-dark);
}

.portfolio-details .content .list li{
  font-weight: 500;
  color: var(--color-dark);
  margin-top: 5px;
}

.portfolio-details .content .list i {
  color: var(--theme-color);
  margin-right: 10px;
}




/* ===================
30. Pricing css 
====================== */

.pricing-area{
  position: relative;
}

.pricing-item {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 40px;
  position: relative;
  padding: 40px;
  box-shadow: var(--box-shadow);
  transition: var(--transition);
  color: #000000 !important;
}

.pricing-item:hover{
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
}

/* =====================
COMPREHENSIVE PRICING CARD TEXT FIX - FORCE BLACK IN LIGHT MODE
====================== */

/* Force ALL pricing item text to black (works even if theme not set) */
.pricing-item,
.pricing-item h1,
.pricing-item h2,
.pricing-item h3,
.pricing-item h4,
.pricing-item h5,
.pricing-item h6,
.pricing-item p,
.pricing-item span,
.pricing-item li,
.pricing-item ul,
.pricing-item ul li,
.pricing-feature,
.pricing-feature li,
.pricing-feature ul,
.pricing-feature ul li {
  color: #000000 !important;
}

/* Override for dark mode only */
[data-theme="dark"] .pricing-item,
[data-theme="dark"] .pricing-item h1,
[data-theme="dark"] .pricing-item h2,
[data-theme="dark"] .pricing-item h3,
[data-theme="dark"] .pricing-item h4,
[data-theme="dark"] .pricing-item h5,
[data-theme="dark"] .pricing-item h6,
[data-theme="dark"] .pricing-item p,
[data-theme="dark"] .pricing-item span,
[data-theme="dark"] .pricing-item li,
[data-theme="dark"] .pricing-feature li {
  color: var(--text-secondary) !important;
}

/* Exception: Keep icons orange (checkmarks, x marks) */
.pricing-item i,
.pricing-item .fas,
.pricing-item .far,
.pricing-item .fab,
.pricing-feature li i,
.pricing-feature li .fas,
.pricing-feature li .far,
.pricing-feature li .fab {
  color: var(--accent) !important;
}

/* Exception: Keep not-include items muted gray */
.pricing-item .not-include,
.pricing-feature li .not-include,
.pricing-feature li .not-include * {
  color: #666666 !important;
}

/* Exception: Keep buttons with their own styling */
.pricing-item .theme-btn,
.pricing-item .theme-btn * {
  color: inherit !important;
} 

.pricing-header-wrap{
  margin-bottom: 30px;
}

.pricing-header{
  position: absolute;
  right: 30px;
  top: -15px;
  background: var(--theme-color);
  padding: 0 15px;
  box-shadow: var(--box-shadow);
  border-radius: 50px;
  letter-spacing: 4px;
}

.pricing-header h5 {
  font-size: 22px;
  font-weight: 600;
  text-transform: capitalize;
  display: inline-block;
  color: #000000 !important;
}

.pricing-amount {
  margin-bottom: 45px;
}

.pricing-amount strong {
  font-size: 45px;
  font-weight: 900;
  color: #000000 !important;
  line-height: 1;
}

.pricing-amount-type {
  color: #000000 !important;
  font-size: 16px;
  font-weight: 500;
}

.pricing-text {
  color: #000000 !important;
  text-transform: uppercase;
  font-size: 15px;
}

.pricing-feature {
  padding: 40px 0 0 0;
}

/* =====================
PRICING LIST TEXT & ICONS - VISIBILITY FIX
====================== */

.pricing-feature li {
  margin-bottom: 15px;
  color: #000000 !important;
  font-weight: 500;
}

.pricing-feature li:last-child {
  margin-bottom: 0px;
}

/* Pricing check icons - accent color */
.pricing-feature li i,
.pricing-feature li .check,
.pricing-card li .check {
  color: var(--accent) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  margin-right: 10px;
}

/* Pricing cross icons - muted color */
.pricing-feature li .cross,
.pricing-card li .cross {
  color: var(--text-muted) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Pricing list text - explicit black (NO inherit) */
.pricing-feature li,
.pricing-card li {
  color: #000000 !important;
}

/* Light mode pricing list - Explicit black */
:root:not([data-theme="dark"]) .pricing-feature li,
:root:not([data-theme="dark"]) .pricing-card li,
:root:not([data-theme="dark"]) .pricing-feature li span,
:root:not([data-theme="dark"]) .pricing-feature li a {
  color: #000000 !important;
}

/* Dark mode pricing list */
[data-theme="dark"] .pricing-feature li,
[data-theme="dark"] .pricing-card li {
  color: var(--card-text-dark-secondary) !important;
}

.pricing-feature li .not-include {
  color: var(--text-muted) !important;
} 

.pricing-section {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 32px;
  align-items: stretch;
}

.pricing-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.pricing-card .pricing-btn {
  margin-top: auto;
}

.pricing-card .btn {
  width: fit-content;
  min-width: 160px;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 10px;
}

.pricing-card.growth {
  transform: scale(1.04);
  border: 2px solid #f5a400;
}

.pricing-card.growth:hover {
  transform: scale(1.04) translateY(-5px);
}

@media all and (max-width: 991px) {
  .pricing-section {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }
}

@media all and (max-width: 767px) {
  .pricing-section {
    grid-template-columns: 1fr;
  }
}

@media all and (max-width: 991px) {
  .pricing-amount strong {
    font-size: 50px;
  }
}



/* ===================
31. Counter css 
====================== */

.counter-area {
  position: relative;
  background: #0b0b0b !important;
  overflow: hidden;
  z-index: 1;
}

/* Counter area - ensure all text is white */
.counter-area .site-title,
.counter-area .site-heading,
.counter-area .site-heading .site-title,
.counter-area h1,
.counter-area h2,
.counter-area h3,
.counter-area h4,
.counter-area h5,
.counter-area h6,
.counter-area p {
  color: #ffffff !important;
}

.counter-shape .img-1{
  position: absolute;
  left: -20px;
  top: 0;
  width: 320px;
  opacity: .2;
  z-index: -1;
}

.counter-shape .img-2{
  position: absolute;
  right: -20px;
  bottom: 0;
  width: 320px;
  opacity: .1;
  z-index: -1;
}

.counter-box {
  display: flex;
  gap: 12px;
  position: relative;
  padding: 20px 15px 20px 20px;
  border-radius: 15px;
  border: 2px solid var(--border-white-color);
  background: #ffffff !important;
  box-shadow: 0 0 40px 5px rgb(0 0 0 / 5%);
  z-index: 1;
}

.counter-box .icon {
  width: 80px;
  height: 80px;
  line-height: 70px;
  font-size: 35px;
  border-radius: 50px;
  text-align: center;
  color: var(--color-white);
  background: var(--color-white);
}

.counter-box .icon img{
  width: 45px;
}

.counter-box .info{
  display: flex;
  gap: 2px;
}

.counter-box .counter {
  display: block;
  line-height: 1;
  color: var(--color-white);
  font-size: 50px;
  font-weight: 900;
}

.counter-box .unit{
  font-size: 25px;
  color: var(--theme-color);
  font-weight: 500;
  line-height: 1;
  margin: 3px 0 0 3px;
}

.counter-box .title {
  color: var(--color-white);
  margin-top: 10px;
  font-size: 18px;
  font-weight: 600;
  text-transform: capitalize;
}



/* ===================
32. Team css 
====================== */

.team-area{
  position: relative;
}

.team-img{
  position: relative;
}

.team-img img{
  border-radius: 20px;
}

.team-social-btn{
  position: absolute;
  right: -3px;
  bottom: 0;
  width: 60px;
  height: 60px;
  background: var(--color-white);
  border-top-left-radius: 50%;
  padding: 8px;
}

.team-social-btn::before{
  content: "";
  position: absolute;
  left: -20px;
  bottom: 0;
  width: 20px;
  height: 20px;
  background: transparent;
  box-shadow: 5px 5px 0 5px var(--color-white);
  border-bottom-right-radius: 20px;
}

.team-social-btn::after{
  content: "";
  position: absolute;
  top: -20px;
  right: 3px;
  width: 20px;
  height: 20px;
  background: transparent;
  box-shadow: 5px 5px 0 5px var(--color-white);
  border-bottom-right-radius: 20px;
}

.team-social-btn button{
  width: 42px;
  height: 42px;
  line-height: 42px;
  background: var(--theme-color);
  color: var(--color-white);
  border-radius: 50%;
  text-align: center;
  font-size: 18px;
  border: none;
}

.team-social{
  position: absolute;
  right: 9px;
  bottom: 40px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}

.team-social a {
  display: block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin-bottom: 10px;
  background: var(--color-white);
  color: var(--theme-color);
  border-radius: 50px;
}

.team-social a:hover {
 background: var(--theme-color);
 color: var(--color-white);
}

.team-social-wrap:hover .team-social{
  opacity: 1;
  visibility: visible;
  bottom: 60px;
}

.team-content{
  margin-top: 10px;
}

.team-content h4 a{
  color: var(--color-dark);
  font-size: 20px;
}

.team-content h4 a:hover{
  color: var(--theme-color);
}

.team-content span{
  color: var(--theme-color);
  font-weight: 500;
}



/* ===================
33. Video css 
====================== */

.video-area {
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.video-area::before {
  content: "";
  position: absolute;
  background: rgba(0, 63, 114, .5);
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.video-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  border-radius: 5px;
  height: 500px;
}

.video-wrap img {
  border-radius: 12px;
}

.video-wrap .play-btn {
  display: inline-block;
  padding: 0;
  height: 75px;
  width: 75px;
  text-align: center;
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media all and (max-width: 767px) {
  .video-wrap {
    height: 400px;
  }
}



/*====================
34. Quote css 
======================*/

.quote-area{
  position: relative;
}

.qa-negative{
  margin-top: -120px;
}

.quote-content{
  background: var(--color-white);
  border-radius: 20px;
  box-shadow: var(--box-shadow);
  padding: 30px;
}

.quote-header{
  border-bottom: 1px solid var(--border-info-color);
  padding-bottom: 20px;
  margin-bottom: 30px;
}

.quote-img img{
  border-radius: 20px;
}



/*====================
35. Location css 
======================*/

.location-map {
  position: relative;
}

.location-item {
  position: absolute;
  left: 10%;
  top: 24%;
}

.location-item:nth-child(2){
  left: 36%;
  top: 66%;
}

.location-item:nth-child(3){
  left: 38%;
  top: 10px;
}

.location-item:nth-child(4){
  left: 50%;
  top: 35%;
}

.location-item:nth-child(5){
  left: 80%;
  top: 16%;
}

.location-item:nth-child(6){
  left: 94%;
  top: 88%;
}

.location-item:nth-child(7){
  left: 28%;
  top: 27%;
}

.location-item:nth-child(8){
  left: 57%;
  top: 58%;
}

.location-item:nth-child(9){
  left: 74%;
  top: 47%;
}

.location-item:nth-child(10){
  left: 94%;
  top: 18%;
}

.location-item:nth-child(11){
  left: 63%;
  top: 18%;
}

.location-item:nth-child(12){
  left: 83%;
  top: 75%;
}

.location-item .point{
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--theme-color);
  border-radius: 50%;
  cursor: pointer;
  z-index: 1;
}

.location-item .point::after{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: var(--theme-color);
  border-radius: 50%;
  transform: scale(1);
  animation: ripple-1 1.5s 0s infinite;
  z-index: -1;
}

.location-item .info{
  padding: 8px 15px;
  position: relative;
  position: absolute;
  width: max-content;
  transform: translateX(-50%);
  left: 5.2px;
  bottom: 20px;
  background: var(--theme-color);
  border-radius: 50px;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  z-index: 1;
}

.location-item .info::after{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 12px solid var(--theme-color);
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}

.location-item .info h5 {
  font-size: 15px;
  color: var(--color-white);
}

.location-item.active .info{
  opacity: 1;
  visibility: visible;
  bottom: 30px;
}

@keyframes ripple-1 {
  0% {
      transform: scale(1);
      opacity: 0.8;
  }
  100% {
      transform: scale(3);
      opacity: 0;
  }
}



/* ===================
36. Cta css 
====================== */

.cta-area{
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding-top: 90px;
  padding-bottom: 90px;
  z-index: 1;
}

.cta-area::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background:rgba(0, 63, 114, .7);
  z-index: -1;
}

.cta-content{
  text-align: center;
  position: relative;
  z-index: 1;
}

/* CTA area - ensure all text is white */
.cta-area h1,
.cta-area h2,
.cta-area h3,
.cta-area h4,
.cta-area h5,
.cta-area h6,
.cta-area .site-title,
.cta-area p,
.cta-content h1,
.cta-content h2,
.cta-content h3,
.cta-content h4,
.cta-content h5,
.cta-content h6,
.cta-content p {
  color: #ffffff !important;
}

.cta-content h1,
.cta-content h2,
.cta-content h3,
.cta-content h4,
.cta-content h5,
.cta-content h6,
.cta-content .site-title {
  color: #ffffff !important;
  text-transform: capitalize;
  font-weight: 700;
  margin-bottom: 10px;
}

.cta-content p {
  color: #ffffff !important;
  font-size: 16px;
  margin-bottom: 30px;
}

.cta-content .theme-btn{
  background: var(--theme-color);
  color: var(--color-white);
}



/* ===================
37. Choose css 
====================== */

.choose-area{
  position: relative;
}

.choose-item{
  display: flex;
  gap: 20px;
  margin: 30px 0;
}

.choose-item-icon{
  position: relative;
  width: 60px;
  height: 60px;
  line-height: 58px;
  background: var(--theme-color);
  text-align: center;
  border-radius: 50px 50px 50px 10px;
}

.choose-item-icon::before{
  content: "";
  position: absolute;
  inset: -5px;
  border: 2px solid var(--theme-color);
  border-radius: 50px 50px 50px 10px;
}

.choose-item-icon img{
  width: 38px;
  filter: brightness(0) invert(1);
}

.choose-item-info{
  flex: 1;
}

.choose-item-info h4{
  color: #0b0b0b !important;
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 600;
}

.choose-item-info p{
  color: #444444 !important;
}

.choose-img{
  position: relative;
  text-align: right;
}

.choose-img .img-1{
  width: 70%;
  border-radius: 40px;
}

.choose-img .img-2{
  position: absolute;
  left: 0;
  bottom: -125px;
  width: 80%;
  border-radius: 50px;
  border: 8px solid var(--color-white);
}

.choose-img .img-shape{
  position: absolute;
  left: 0;
  top: 50px;
  width: 150px;
  z-index: -1;
}

@media all and (max-width: 991px) {
  .choose-img .img-2{
    width: 70%;
    bottom: -50px;
  }
}




/*====================
38. Track shipment css 
======================*/

.track-shipment-wrap{
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: 40px;
  padding: 30px;
}

.track-shipment-form{
  background: var(--color-white);
  padding: 30px;
  border-radius: 20px;
  box-shadow: var(--box-shadow);
}

.track-shipment-form h4{
  margin-bottom: 20px;
}

.track-shipment-form .theme-btn{
  width: 100%;
}

.track-shipment-form .theme-btn::before{
  width: 400px;
  height: 400px;
}



/*====================
39. Testimonial css 
======================*/

.testimonial-area {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.ts-bg{
  background: var(--color-dark);
}

.testimonial-area::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-image: url(../img/shape/02.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: .1;
  z-index: -1;
}

.testimonial-item {
  margin-bottom: 20px;
}

.testimonial-quote {
  position: relative;
  background: var(--color-white);
  padding: 30px;
  border-radius: 30px;
}

.testimonial-quote::before {
  content: "\f0dd";
  position: absolute;
  font-family: "Font Awesome 6 Pro";
  bottom: -52px;
  left: 40px;
  font-weight: bold;
  font-size: 70px;
  color: var(--color-white);
}

.testimonial-quote p{
  position: relative;
  color: var(--color-dark);
  font-size: 18px;
  font-style: italic;
  font-weight: 500;
  z-index: 1;
}

.testimonial-content {
  display: flex;
  justify-content: start;
  align-items: center;
  margin-top: 30px;
  margin-left: 20px;
}

.testimonial-author-img {
  margin-right: 20px;
  width: 70px;
  height: 70px;
  padding: 4px;
  border-radius: 50px;
  border: 2px dashed var(--theme-color);
}

.testimonial-author-img img {
  border-radius: 50%;
}

.testimonial-author-info h4 {
  font-size: 20px;
  color: var(--color-white);
}

.testimonial-author-info p {
  color: var(--theme-color);
  font-weight: 500;
}

.testimonial-quote-icon{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: var(--theme-color);
  color: var(--color-white);
  border-radius: 50px 50px 25px 50px;
  text-align: center;
  font-size: 35px;
}

.testimonial-shadow-icon{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: .15;
}

.testimonial-shadow-icon img{
  width: 200px !important;
}

.testimonial-rate {
  color: #FB9902;
  margin-top: 15px;
}

/* testimonial-slider */
.testimonial-slider .owl-dots {
  text-align: center;
  margin-top: 10px;
}

.testimonial-slider .owl-dots .owl-dot span {
  background: var(--theme-color);
  margin: 5px;
  border-radius: 10px;
  width: 15px;
  height: 7px;
  display: inline-block;
  transition: var(--transition);
}

.testimonial-slider .owl-dots .owl-dot.active span {
  background-color: var(--theme-color);
  width: 8px;
  height: 8px;
}



/* ========================
40. Gallery css 
=========================== */

.gallery-item {
  position: relative;
  width: 100%;
}

.gallery-img {
  height: 100%;
}

.gallery-img img {
  width: 100%;
  border-radius: 40px;
}

.gallery-content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.gallery-content::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  right: 10px;
  bottom: 10px;
  background: var(--theme-color);
  border-radius: 40px;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}

.gallery-content:hover::before {
  opacity: 0.9;
  visibility: visible
}

.gallery-link {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: 0.5s;
  border-radius: 50px;
  opacity: 0;
  visibility: hidden;
  font-size: 50px;
  color: var(--color-white);
}

.gallery-link:hover {
  color: var(--color-white);
}

.gallery-content:hover .gallery-link {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}



/*====================
41. Blog css 
======================*/

.blog-area{
  position: relative;
}

.blog-item{
  padding: 20px;
  background: var(--color-white);
  border-radius: 20px;
  box-shadow: var(--box-shadow);
  transition: var(--transition);
}

.blog-item-img{
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.blog-item-img img {
  border-radius: 12px;
}

.blog-item:hover .blog-item-img img{
  transform: scale(1.1);
} 

.blog-date{
  position: absolute;
  right: 10px;
  top: 10px;
  width: 60px;
  height: 60px;
  line-height: 15px;
  background: var(--theme-color);
  color: var(--color-white);
  text-align: center;
  border-radius: 50px;
  box-shadow: var(--box-shadow);
  border: 4px solid var(--color-white);
}

.blog-date strong{
  display: block;
  font-size: 25px;
  font-weight: 800;
  margin-top: 4px;
  line-height: 1;
}

.blog-date span{
  font-weight: 500;
}

.blog-item-info {
  padding: 15px 0 0 0;
}

.blog-item-meta ul {
  margin: 0;
  margin-bottom: 14px;
  padding: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-info-color);
}

.blog-item-meta ul li {
  display: inline-block;
  margin-right: 15px;
  font-weight: 500;
  position: relative;
  color: var(--color-dark);
}

.blog-item-meta ul li i {
  margin-right: 5px;
  color: var(--theme-color);
}

.blog-item-meta a{
  color: var(--color-dark);
}

.blog-item-meta a:hover {
  color: var(--theme-color);
}

.blog-title {
  font-size: 22px;
  margin-bottom: 15px;
  text-transform: capitalize;
}

.blog-item-info h4 a {
  color: var(--color-dark);
  font-weight: 600;
}

.blog-item-info h4 a:hover {
  color: var(--theme-color);
}

.blog-item-info p {
  margin-bottom: 16px;
}

.blog-item-info .theme-btn {
  margin-top: 10px;
}




/*========================
42. Blog single css
==========================*/

.blog-single{
  position: relative;
}

/* blog single img */
.blog-single .blog-thumb-img {
  margin-bottom: 20px;
}

.blog-single .blog-single-content img {
  border-radius: 15px;
}

/* blog single meta */
.blog-single .blog-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.blog-single .blog-meta-left ul {
  display: flex;
  align-items: center;
  gap: 20px;
}

.blog-single .blog-meta-left ul li{
  color: var(--color-dark);
  font-weight: 500;
}

.blog-single .blog-meta i {
  margin-right: 5px;
  color: var(--theme-color);
}

.blog-single .blog-meta a {
  color: var(--color-dark);
  font-weight: 500;
}

.blog-single .blog-meta a:hover {
  color: var(--theme-color);
}

/* blog single details */
.blog-single .blog-details-title {
  font-size: 34px;
  color:  var(--color-dark);
  font-weight: 700;
}

/* blog single blockqoute */
.blog-single .blockqoute {
  background: var(--theme-bg-light);
  border-left: 5px solid var(--theme-color);
  padding: 30px;
  font-size: 17px;
  font-style: italic;
  margin: 20px 0;
  border-radius: 0px;
  position: relative;
}

.blog-single .blockqoute .blockqoute-icon{
  position: absolute;
  right: 20px;
  bottom: 5px;
  color: var(--theme-color);
  font-size: 70px;
}

.blog-single .blockqoute-author {
  margin-top: 20px;
  padding-left: 60px;
  position: relative;
  color:  var(--color-dark);
}

.blog-single .blockqoute-author::before {
  content: "";
  position: absolute;
  height: 2px;
  width: 40px;
  background: var(--theme-color);
  left: 0;
  top: 10px;
}

/* blog single details tag */
.blog-single .blog-details-tag {
  display: flex;
  align-items: center;
  gap: 20px;
}

.blog-single .blog-details-tag h5 {
  color:  var(--color-dark);
}

.blog-single .blog-details-tag ul {
  display: flex;
  align-items: center;
  gap: 15px;
}

.blog-single .blog-details-tag ul a {
  background: var(--theme-bg-light);
  color:  var(--color-dark);
  padding: 5px 18px;
  border-radius: 50px;
  transition: var(--transition);
}

.blog-single .blog-details-tag ul a:hover {
  background: var(--theme-color);
  color: var(--color-white);
}

/* blog single author */
.blog-single .blog-author {
  display: flex;
  justify-content: start;
  align-items: center;
  background: var(--theme-bg-light);
  margin: 50px 0;
  padding: 20px;
  border-radius: 15px;
}

.blog-single .blog-author-img {
  width: 320px;
}

.blog-single .blog-author-img img {
  border-radius: 15px;
}

.blog-single .author-name {
  font-size: 22px;
  color: var(--theme-color);
  margin: 8px 0;
}

.blog-single .author-info {
  padding: 0 20px;
}

.blog-single .author-social {
  margin-top: 10px;
}

.blog-single .author-social a {
  width: 35px;
  height: 35px;
  line-height: 32px;
  text-align: center;
  border: 2px solid var(--theme-color);
  border-radius: 50px;
  margin-right: 5px;
  color: var(--theme-color);
  transition: var(--transition);
}

.blog-single .author-social a:hover {
  color: var(--color-white);
  background: var(--theme-color);
}

/* blog single comment */
.blog-single .blog-comment h3 {
  color:  var(--color-dark);
  font-weight: 700;
}

.blog-single .blog-comment-wrap {
  margin: 30px 0;
}

.blog-single .blog-comment-item {
  display: flex;
  justify-content: start;
  align-items: flex-start;
  border: 1px solid var(--border-info-color);
  border-radius: 20px;
  padding: 15px;
  margin-top: 50px;
}

.blog-single .blog-comment-item.reply {
  margin-left: 50px;
}

.blog-single .blog-comment-item img {
  width: 80px;
  border-radius: 50%;
}

.blog-single .blog-comment-content {
  padding: 0 0 0 20px;
}

.blog-single .blog-comment-content span {
  font-size: 14px;
  color: var(--theme-color);
  font-weight: 500;
}

.blog-single .blog-comment-content a {
  font-weight: 500;
  margin-top: 5px;
  color: var(--theme-color);
}

.blog-single .blog-comment-content a:hover {
  color:  var(--theme-color2);
}

.blog-single .blog-comment-content h5 {
  color:  var(--color-dark);
  font-weight: 700;
}

/* blog single comment form */
.blog-single .blog-comment-form {
  padding: 30px;
  margin-top: 50px;
  border-radius: 15px;
  background: var(--theme-bg-light);
}

.blog-single .blog-comment-form h3 {
  margin-bottom: 20px;
}


@media all and (max-width: 767px) {
  .blog-single .blog-meta {
    flex-direction: column;
    font-size: 15px;
  }

  .blog-single .blog-meta-left ul {
    gap: 10px;
  }

  .blog-single .blog-details-tag {
    flex-direction: column;
    align-items: flex-start;
  }

  .blog-single .blog-author {
    flex-direction: column;
    text-align: center;
    padding: 25px;
  }

  .blog-single .author-info{
    margin-top: 25px;
  }

  .blog-single .blog-comment-item {
    flex-direction: column;
    text-align: center;
    padding: 30px 0px;
    background: var(--color-white);
    box-shadow: var(--box-shadow);
    margin-bottom: 30px;
    border-radius: 15px;
  }

  .blog-single .blog-comment-item img{
    margin: 0 auto 20px auto;
  }

  .blog-single .blog-comment-item.reply {
    margin-left: 0px;
  }
}



/*==========================
43. Blog sidebar widget css
============================*/

.blog-sidebar .widget {
  background: var(--theme-bg-light);
  padding: 30px;
  margin-bottom: 30px;
  border-radius: 15px;
}

.blog-sidebar .widget .widget-title {
  padding-bottom: 10px;
  margin-bottom: 30px;
  position: relative;
  font-size: 22px;
  color:  var(--color-dark);
  font-weight: 700;
}

.blog-sidebar .widget .widget-title::before {
  position: absolute;
  content: '';
  width: 15px;
  border-bottom: 3px solid var(--theme-color);
  bottom: 0;
  left: 0;
}

.blog-sidebar .widget .widget-title::after {
  position: absolute;
  content: '';
  width: 30px;
  border-bottom: 3px solid var(--theme-color);
  bottom: 0;
  left: 22px;
}

/* search widget */
.blog-sidebar .widget .search-form .form-control {
  padding-right: 50px;
}

.blog-sidebar .widget .search-form .form-group{
  position: relative;
}

.blog-sidebar .widget .search-form button {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 18px;
  padding: 12px 18px 6px 18px;
  background: transparent;
  border: none;
  color: var(--theme-color);
}

/* category widget */
.blog-sidebar .widget .category-list a {
  display: block;
  padding: 10px 0;
  font-weight: 500;
  color: var(--color-dark);
  border-bottom: 1px solid var(--border-info-color);
  transition: var(--transition);
}

.blog-sidebar .widget .category-list a:last-child {
  margin-bottom: 0px;
  border-bottom: none;
}

.blog-sidebar .widget .category-list a:hover {
  padding-left: 10px;
  color: var(--theme-color);
}

.blog-sidebar .widget .category-list a i {
  margin-right: 5px;
  color: var(--theme-color);
}

.blog-sidebar .widget .category-list a span {
  float: right;
}

/* recent post widget*/
.blog-sidebar .widget .recent-post-item {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.blog-sidebar .widget .recent-post-img img {
  width: 75px;
  border-radius: 15px;
}

.blog-sidebar .widget .recent-post-info {
  flex: 1;
}

.blog-sidebar .widget .recent-post-info h6 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.blog-sidebar .widget .recent-post-info span {
  font-size: 14px;
  color: var(--theme-color);
  font-weight: 500;
}

.blog-sidebar .widget .recent-post-info span i {
  margin-right: 5px;
}

.blog-sidebar .widget .recent-post-info h6 a:hover {
  color: var(--theme-color);
}

/* social widget */
.blog-sidebar .widget .social-link a {
  width: 35px;
  height: 35px;
  line-height: 32px;
  border: 2px solid var(--theme-color);
  color: var(--theme-color);
  text-align: center;
  margin-right: 5px;
  border-radius: 50px;
  transition: var(--transition);
}

.blog-sidebar .widget .social-link a:hover {
  background: var(--theme-color);
  color: var(--color-white);
}

/* tag widget */
.blog-sidebar .widget .tag-list a {
  background: var(--color-white);
  color:  var(--color-dark);
  padding: 5px 18px;
  margin-bottom: 10px;
  margin-right: 10px;
  border-radius: 50px;
  display: inline-block;
  transition: var(--transition);
}

.blog-sidebar .widget .tag-list a:hover {
  background-color: var(--theme-color);
  color: var(--color-white);
}




/*====================
44. Pagination css 
======================*/

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}

.pagination .page-link {
  border: none;
  background:  var(--theme-bg-light);
  color: var(--color-dark);
  font-weight: 500;
  margin: 0 10px;
  border-radius: 12px !important;
  width: 40px;
  height: 40px;
  line-height: 28px;
  text-align: center;
  transition: var(--transition);
  z-index: 1;
}

.pagination .page-link:hover,
.pagination .page-item.active .page-link {
  background: var(--theme-color);
  color: var(--color-white);
}



/*====================
45. Faq css 
======================*/

.faq-area .accordion-item {
  border: none;
  background: var(--color-white);
  border-radius: 12px;
  margin-bottom: 30px;
  box-shadow: var(--box-shadow);
}

.faq-area .accordion-button {
  border-radius: 0px;
  background: transparent;
  font-weight: 700;
  font-size: 20px;
  color:  var(--color-dark);
  box-shadow: none;
}

.faq-area .accordion-button::after{
  content: "\f107";
  background: none;
  color: var(--theme-color);
  font-size: 24px;
  font-weight: 500;
  font-family: 'Font Awesome 6 pro';
  width: unset;
  height: unset;
  margin-right: 3px;
}

.faq-area .accordion-button:not(.collapsed) {
  color: var(--theme-color);
  background: transparent;
  border-bottom: 1px dashed var(--theme-color);
  box-shadow: none;
}

.faq-area .accordion-button:not(.collapsed)::after{
  content: "\f107";
  transform: rotate(-180deg);
}

.faq-area .accordion-button span {
  width: 45px;
  height: 45px;
  margin-right: 15px;
}

.faq-area .accordion-button span i {
  width: 45px;
  height: 45px;
  line-height: 45px;
  border-radius: 50px;
  background: var(--theme-color);
  text-align: center;
  color: var(--color-white);
}

.faq-area .accordion-body{
  color: var(--color-dark);
  font-weight: 500;
}

@media all and (max-width: 991px) {
  .faq-area .faq-content {
    margin-bottom: 50px;
  }

  .faq-area .accordion-button {
    font-size: 16px;
  }
}




/*===================
46. Contact us css 
=====================*/

.contact-content {
  margin-bottom: 50px;
}

.contact-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 15px;
  padding: 30px 20px;
  position: relative;
  margin-bottom: 25px;
  border-radius: 15px 50px 50px 50px;
  background:var(--theme-bg-light);
  transition: var(--transition);
}

.contact-info:hover{
  transform: translateY(-8px)
}

.contact-info .icon{
  font-size: 35px;
  color: var(--color-white);
  width: 70px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  border-radius: 50px;
  background: var(--theme-color);
}

.contact-info .content h5 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  color:  var(--color-dark);
}

.contact-info .content p{
  color:  var(--color-dark);
  font-weight: 500;
  font-size: 16px;
}

.contact-img img{
  width: 100%;
  border-radius: 15px;
}

.contact-form{
  background: var(--theme-bg-light);
  padding: 30px;
  border-radius: 15px;
}

.contact-form-header {
  margin-bottom: 30px;
}

.contact-form-header h2 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--color-dark);
}

.contact-form-header p{
  color: var(--body-text-color);
}

.contact-form .form-message.success,
.contact-form .form-message.error{
  margin-bottom: 20px;
  border-radius: 10px;
  padding: 10px 18px;
}

.contact-form .form-message.success{
  color: #41BE7D;
  background:rgba(65, 190, 125, .1);
}

.contact-form .form-message.error{
  color: #FF7F7F;
  background:rgba(255, 127, 127, .1);
}

.contact-form .form-message.error{
  color: var(--color-red);
}

.contact-map {
  margin-bottom: -9px;
}

.contact-map iframe {
  width: 100%;
  height: 450px;
}



/*====================
47. Auth css 
======================*/

.auth-form {
  padding: 40px;
  background: var(--theme-bg-light);
  border-radius: 15px;
}

/* auth-header */
.auth-form .auth-header {
  text-align: center;
  margin-bottom: 30px;
}

.auth-form .auth-header img {
  width: 200px;
  margin-bottom: 10px;
}

.auth-form .auth-header h3 {
  color: var(--theme-color);
  margin-bottom: 5px;
  font-weight: 800;
}

.auth-form .auth-header p {
  color: var(--color-dark);
  font-size: 20px;
}

/* auth-group */
.auth-group{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
}

.auth-group .form-check{
  margin-bottom: 0;
}

.auth-group .form-check-label{
  color: var(--color-dark);
  font-weight: 500;
}

.auth-group .auth-group-link{
  color: var(--theme-color);
  font-weight: 500;
}

.auth-group .auth-group-link:hover{
  color: var(--color-red);
}

/* password-view */
.auth-form .password-view{
  cursor: pointer;
}

.auth-form .password-view i{
  left: unset;
  right: 20px;
  color: var(--body-text-color);
}

.auth-form .password-view.show i::before{
  content: "\f06e";
}

/* auth-btn */
.auth-form .theme-btn {
  width: 100%;
}

.auth-form .theme-btn::before{
  width: 420px;
  height: 420px;
  transition: var(--transition2);
}

/* auth-bottom */
.auth-form .auth-bottom {
  margin-top: 25px;
}

.auth-form .auth-bottom p {
  color: var(--color-dark);
  text-align: center;
}

.auth-form .auth-bottom a {
  color: var(--theme-color);
  font-weight: 500;
}

.auth-form .auth-bottom a:hover {
  color:  var(--color-red);
}

/* auth-social */
.auth-form .auth-social {
  border-top: 1px solid var(--border-info-color);
  margin-top: 15px;
}

.auth-form .auth-social p {
  color: var(--color-dark);
  margin: 10px 0;
}

.auth-form .auth-social-list {
  text-align: center;
  margin-bottom: 10px;
}

.auth-form .auth-social-list a {
  width: 40px;
  height: 40px;
  line-height: 40px;
  background: var(--theme-color);
  border-radius: 50px;
  margin: 5px;
}

.auth-form .auth-social-list a i {
  color: var(--color-white);
}

.auth-form .auth-social-list a:hover {
  background:  var(--color-red);
}

@media only screen and (max-width: 991px) {
  .auth-form {
    padding: 40px 20px;
  }
}



/*====================
48. Coming soon css 
======================*/

.coming-soon {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover !important;
  background-position: center !important;
  min-height: 100vh;
  width: 100%;
  z-index: 1;
}

.coming-soon:before {
  position: absolute;
  content: '';
  background: rgba(0, 0, 0, .7);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

.coming-wrap{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 75vh;
}

.coming-content{
  text-align: center;
}

.coming-info h1{
  color: var(--color-white);
  font-weight: 700;
  font-size: 50px;
}

.coming-info p{
  font-size: 18px;
  color: var(--color-white);
  margin-top: 10px;
}

.coming-countdown-wrap{
  margin-top: 30px;
  margin-bottom: 30px;
}

.coming-countdown .time-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
}

.coming-countdown .time{
  background: var(--color-white);
  width: 125px;
  border-radius: 15px;
  padding: 14px 10px;
}

.coming-countdown .time span{
  display: block;
}

.coming-countdown .time span:first-child{
  color: var(--theme-color);
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
}

.coming-countdown .time .unit{
  color: var(--color-dark);
  font-weight: 500;
}

.coming-countdown .divider{
  display: none;
}

.coming-newsletter-form{
  margin-top: 50px;
  margin-bottom: 25px;
}

.coming-newsletter-form .form-group{
  position: relative;
}

.coming-newsletter-form .form-control{
  padding: 17px 150px 17px 20px;
  border-radius: 50px;
  border-color: transparent;
  color: var(--color-dark);
}

.coming-newsletter-form .form-control::placeholder{
  color: var(--color-dark);
}

.coming-newsletter-form .form-control:focus{
  border-color: var(--theme-color);
}

.coming-newsletter-form .theme-btn{
  position: absolute;
  right: 5px;
  top: 6px;
  padding: 9px 15px;
}

.coming-social{
  margin-top: 40px;
  text-align: center;
}

.coming-social a{
  display: inline-block;
  background: var(--theme-color);
  color: var(--color-white);
  margin: 5px;
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  border-radius: 50px;
  transition: .5s;
  box-shadow: var(--box-shadow2);
}

.coming-social a:hover{
  background: var(--theme-color2);
}

@media all and (max-width: 767px) {
  .coming-info h1{
    font-size: 40px;
  }
}



/*====================
49. Error css 
======================*/

.error-wrap {
  text-align: center;
}

.error-wrap h1 {
  font-size: 250px;
  letter-spacing: 5px;
  font-weight: bold;
  color: var(--theme-color);
}

.error-wrap h1 span {
  color:  var(--color-dark);
}

.error-wrap h2 {
  margin-top: 30px;
  margin-bottom: 10px;
}

.error-wrap img {
  width: 100%;
}

.error-wrap .theme-btn {
  margin-top: 30px;
}


@media all and (max-width: 767px) {
  .error-wrap h1 {
    font-size: 160px;
  }
}



/*====================
50. Terms/privacy css 
====================== */

.terms-content:not(:last-child) {
  margin-bottom: 54px;
}

.terms-content:first-child {
  margin-top: -3px;
}

.terms-content .terms-list {
  margin-top: 37px;
}

.terms-content h3 {
  margin-bottom: 23px;
  position: relative;
  font-weight: 700;
}

.terms-content p:not(:last-child) {
  margin-bottom: 26px;
}

.terms-list li:not(:last-child) {
  margin-bottom: 16px;
}



/*====================
51. Scroll top css
======================*/

#scroll-top {
  position: fixed;
  bottom: -20px;
  right: 30px;
  z-index: 99;
  font-size: 20px;
  border: none;
  outline: none;
  border-radius: 50px;
  color: var(--color-white);
  background-color: var(--theme-color);
  cursor: pointer;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  box-shadow: var(--box-shadow2);
  transition: var(--transition);
  opacity: 0;
  visibility: hidden;
  transform: rotate(-40deg);
  z-index: 1;
}

#scroll-top:hover{
  transform: rotate(0);
}

#scroll-top.active{
  opacity: 1;
  visibility: visible;
  bottom: 20px;
}


@media all and (min-width: 768px) and (max-width: 1199px) {
  #scroll-top.active {
    bottom: 100px;
  }
}



/*====================
52. Footer css 
======================*/

.footer-area {
  background: var(--footer-bg);
  position: relative;
  z-index: 1;
}

.footer-shape img{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: .1;
  z-index: -1;
}

.footer-widget {
  position: relative;
}

.footer-widget-box.about-us{
  margin-right: 50px;
}

.footer-widget-box p {
  color: var(--color-white);
  padding-right: 18px;
  margin-bottom: 20px;
}

.footer-logo img {
  width: 200px;
  margin-bottom: 15px;
}

.footer-widget-title {
  color: var(--color-white);
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 20px;
  font-size: 21px;
  z-index: 1;
}

.footer-widget-title::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 20px;
  height: 3px;
  background: var(--accent);
  border-radius: 50px;
}

.footer-list {
  display: flex;
  flex-direction: column;
  gap: .70rem;
}

.footer-list li a {
  color: var(--color-white);
  transition: var(--transition);
  position: relative;
  margin-left: -20px;
}

.footer-list li a i {
  margin-right: 5px;
  color: var(--accent);
  opacity: 0;
  transition: var(--transition);
}

.footer-list li a:hover {
  margin-left: 0px;
  color: var(--accent);
}

.footer-list li a:hover i{
  opacity: 1;
}

.footer-social {
  display: flex;
  gap: 15px;
  justify-content: end;
}

.footer-social li a i {
  height: 38px;
  width: 38px;
  line-height: 38px;
  text-align: center;
  border-radius: 50px;
  background: var(--color-white);
  color: var(--theme-color);
  transition: var(--transition);
}

.footer-social li a i:hover {
  background: var(--theme-color);
  color: var(--color-white);
}

.footer-contact li {
  position: relative;
  display: flex;
  justify-content: start;
  gap: 10px;
  color: var(--footer-text-color);
  font-size: 16px;
  margin-bottom: 12px;
}

.footer-contact .icon{
  width: 35px;
  height: 35px;
  line-height: 35px;
  background: var(--theme-color);
  border-radius: 50px;
  text-align: center;
}

.footer-contact .content{
  flex: 1;
}

.footer-contact .content h6{
  color: var(--color-white);
  margin-bottom: 5px;
}

.footer-contact .content a{
  color: var(--color-white);
}

.footer-newsletter h6{
  color: var(--color-white);
  margin-bottom: 20px;
}

.footer-newsletter .newsletter-form .form-group{
  position: relative;
}

.footer-newsletter .newsletter-form .form-icon > i{
  top: 21px;
  left: 0;
  color: var(--theme-color);
}

.footer-newsletter .newsletter-form .form-control {
  padding: 16px 140px 16px 32px;
  border-radius: 0px;
  color: var(--color-white);
  box-shadow: none;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--color-white);
  outline: none;
}

.footer-newsletter .newsletter-form .form-control:focus{
  border-bottom-color: var(--theme-color);
}

.footer-newsletter .newsletter-form .form-control::placeholder{
  color: var(--color-white);
}

.footer-newsletter .newsletter-form .theme-btn {
  position: absolute;
  right: 0px;
  top: 5px;
  border-radius: 50px;
  padding: 5px 15px;
}

.footer-newsletter .newsletter-form .theme-btn:hover {
  color: var(--theme-color);
}

.footer-newsletter .newsletter-form .theme-btn::before{
  background: var(--color-white);
}

.footer-newsletter .newsletter-form .theme-btn span{
  margin-right: 0;
  margin-left: 5px;
}

.copyright {
  padding: 20px 0;
  border-top: 1px solid var(--border-white-color);
}

.copyright .footer-menu {
  margin: 0;
  padding: 0;
  text-align: right;
}

.copyright .footer-menu li {
  display: inline-block;
  margin-left: 25px;
  font-size: 16px;
}

.copyright .footer-menu li a {
  color: var(--footer-text-color);
  transition: var(--transition);
}

.copyright .footer-menu li a:hover {
  color: var(--theme-color);
}

.copyright .copyright-text {
  color: var(--footer-text-color);
  margin-bottom: 0px;
  font-size: 16px;
}

.copyright .copyright-text a {
  color: var(--theme-color);
  font-weight: 500;
}


@media all and (max-width: 1199px) {
  .footer-widget-box {
    margin-bottom: 50px;
  }

  .footer-list li a{
    font-size: 14px;
  }
}

@media all and (max-width: 991px) {
  .footer-widget-wrap {
    padding-bottom: 0px;
  }

  .footer-list li a{
    font-size: 16px;
  }

  .copyright .footer-menu {
    float: left;
    margin-top: 20px;
    text-align: left;
  }

  .copyright .footer-menu li {
    margin-left: 0;
    margin-right: 15px;
  }
}

@media all and (max-width: 767px) {
  .footer-widget-wrap {
    padding-bottom: 0px;
  }

  .footer-social {
    justify-content: flex-start;
    margin-top: 20px;
  }
}


/* footer light */
.footer-area.light{
  background: var(--theme-bg-light);
}

.footer-area.light .footer-widget-title{
  color: var(--color-dark);
  font-weight: 800;
}

.footer-area.light .footer-widget-box p{
  color: var(--body-text-color);
}

.footer-area.light .footer-newsletter h6{
  color: var(--color-dark);
  font-weight: 700;
}

.footer-area.light .newsletter-form .form-control{
  color: var(--color-dark);
  border-bottom-color: var(--body-text-color);
}

.footer-area.light .newsletter-form .form-control::placeholder{
  color: var(--body-text-color);
}

.footer-area.light .newsletter-form .form-control:focus{
  border-bottom-color: var(--theme-color);
}

.footer-area.light .footer-list li a{
  color: var(--body-text-color);
}

.footer-area.light .footer-list li a:hover{
  color: var(--theme-color);
}

.footer-area.light .footer-contact .content h6{
  color: var(--color-dark);
  font-weight: 700;
}

.footer-area.light .footer-contact .content a{
  color: var(--body-text-color);
}

.footer-area.light .footer-social li a i{
  background: var(--color-dark);
  color: var(--color-white);
}

.footer-area.light .footer-social li a i:hover{
  background: var(--theme-color);
}

.footer-area.light .copyright{
  border-top-color: var(--border-info-color);
}

.footer-area.light .copyright .copyright-text{
  color: var(--body-text-color);
}


/*====================
53. Home-2 css 
======================*/

.home-2 .header{
  position: relative;
  background: var(--color-dark);
}

.home-2 .header::before{
  content: "";
  position: absolute;
  right: 30px;
  top: 0;
  bottom: 0;
  width: 50%;
  background: var(--theme-color);
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}

.home-2 .header-top{
  background: transparent;
}

.home-2 .header-top::before{
  display: none;
}

.home-2 .navbar::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 90%;
  height: 100%;
  background: var(--color-white);
}

.home-2 .hero-section{
  margin-top: -3rem;
}

.home-2 .hero-single{
  padding-top: 160px;
  padding-bottom: 120px;
}

.home-2 .hero-single .hero-content .hero-title span {
  color: transparent;
  -webkit-text-stroke: 2px var(--color-white);
}

@media all and (max-width: 1199px) {
  .home-2 .navbar::before{
    width: 100%;
  }

  .home-2 .hero-slider .owl-nav .owl-prev,
  .home-2 .hero-slider .owl-nav .owl-next {
    bottom: 15px;
  }
}

@media all and (max-width: 767px) {
  .home-2 .header-top-list a i{
    color: var(--color-white);
  }
}



/*====================
54. Home-3 css 
======================*/

.home-3 .hero-section{
  margin-top: 0;
  padding-top: 20px;
}

.home-3 .hero-single{
  background: #0b0b0b !important;
  padding-top: clamp(120px, 10vw, 180px);
  padding-bottom: clamp(90px, 10vw, 150px);
}

.home-3 .hero-single::before{
  background-image: url(../img/shape/05.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: .1;
}

/* Hero text colors - Always high contrast on dark background */
.home-3 .hero-single .hero-content .hero-sub-title{
  color: #f4a300 !important;
  margin-bottom: 18px;
}

.home-3 .hero-single .hero-content .hero-sub-title::before{
  display: none;
}

.home-3 .hero-single .hero-content .hero-title{
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) !important;
}

.home-3 .hero-single .hero-content p{
  color: #cfcfcf !important;
  line-height: 1.6 !important;
  opacity: 1 !important;
}

.home-3 .hero-single .hero-img{
  text-align: center;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.home-3 .hero-single .hero-img .play-btn{
  width: 95px;
  height: 95px;
  top: 50%;
  transform: translateY(-50%);
  border: 10px solid var(--color-white);
  margin-left: -50px;
}

.home-3 .hero-single .hero-img img{
  width: 100%;
  max-width: 540px;
  border-radius: 40px;
}

@media all and (max-width: 991px) {
  .home-3 .hero-single .hero-img{
    margin-top: 40px;
  }
}


/* =====================
GLOBAL DESIGN UPDATES - BLACK & ORANGE THEME
====================== */

/* Hero Section - RESTORED DARK BACKGROUND (Always Dark) */
/* Hero background - Always dark, regardless of theme */
.home-3 .hero-single {
  background: #0b0b0b !important;
}

.home-3 .hero-single::before {
  background: none !important;
  opacity: 0 !important;
}

/* Hero text - High contrast white/gray on dark background */
.home-3 .hero-single .hero-content .hero-title {
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.home-3 .hero-single .hero-content p {
  color: #cfcfcf !important;
  line-height: 1.6 !important;
  opacity: 1 !important;
}

.home-3 .hero-single .hero-content .hero-sub-title {
  color: #f4a300 !important;
  opacity: 1 !important;
}

/* All Text - Theme-Aware (REMOVED HARDCODED BLACK) */
body, p, .body-text {
  color: var(--text-secondary);
}

/* Headings - Theme-Aware */
h1, h2, h3, h4, h5, h6, .site-title, .site-heading, .heading, .title {
  color: var(--text-primary);
}

/* Dark sections - force white text for all headings */
.sa-bg h1,
.sa-bg h2,
.sa-bg h3,
.sa-bg h4,
.sa-bg h5,
.sa-bg h6,
.sa-bg .site-title,
.sa-bg .site-heading,
.sa-bg .site-heading .site-title,
.service-area.sa-bg h1,
.service-area.sa-bg h2,
.service-area.sa-bg h3,
.service-area.sa-bg h4,
.service-area.sa-bg h5,
.service-area.sa-bg h6,
.service-area.sa-bg .site-title,
.service-area.sa-bg .site-heading,
.service-area.sa-bg .site-heading .site-title {
  color: #ffffff !important;
}

/* Links hover - use accent color */
a:hover {
  color: var(--accent) !important;
}

/* Icons - Use currentColor to inherit from parent, fallback to theme icon color */
.fa,
.fas,
.far,
.fab,
.fal,
[class*="icon"],
i[class*="fa"] {
  color: #ffffff !important;
  transition: color 0.3s ease;
}

/* Icons inside buttons inherit button color */
.theme-btn i,
.theme-btn2 i,
button i,
.btn-primary i {
  color: currentColor !important;
}

.service-icon img, .feature-icon img {
  filter: brightness(0) saturate(100%) invert(68%) sepia(98%) saturate(1000%) hue-rotate(5deg) brightness(1.1) contrast(1.2);
}

/* Buttons - Theme-Aware with Accent Color */
.theme-btn, .theme-btn2, button[type="submit"], .btn-primary {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* Light Mode Buttons - High Contrast */
[data-theme="light"] .theme-btn,
[data-theme="light"] .theme-btn2,
:root:not([data-theme="dark"]) .theme-btn,
:root:not([data-theme="dark"]) .theme-btn2 {
  color: #000000 !important;
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* Dark Mode Buttons */
[data-theme="dark"] .theme-btn,
[data-theme="dark"] .theme-btn2 {
  color: #ffffff !important;
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}

.theme-btn:hover, .theme-btn2:hover, button[type="submit"]:hover, .btn-primary:hover {
  background-color: #FFAE00 !important;
  border-color: #FFAE00 !important;
}

[data-theme="light"] .theme-btn:hover,
[data-theme="light"] .theme-btn2:hover,
:root:not([data-theme="dark"]) .theme-btn:hover,
:root:not([data-theme="dark"]) .theme-btn2:hover {
  color: #000000 !important;
}

[data-theme="dark"] .theme-btn:hover,
[data-theme="dark"] .theme-btn2:hover {
  color: #ffffff !important;
}

/* Cards Same Size */
.service-item, .feature-item, .pricing-box, .process-item {
  min-height: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.service-content, .feature-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.service-text, .feature-content p {
  flex-grow: 1;
}

/* Justified Text */
p, .service-text, .feature-content p, .about-content p, .faq-content p, .accordion-body, .skill-text, .about-text {
  text-align: justify !important;
}

/* Remove Green Colors */
[class*="green"], .color-green, .bg-green, .text-green {
  color: #e29a00 !important;
  background-color: transparent !important;
}

/* Remove Blue Colors */
[class*="blue"], .color-blue, .bg-blue, .text-blue {
  color: #e29a00 !important;
  background-color: transparent !important;
}

/* Section Backgrounds */
.sa-bg, .service-area, .feature-area {
  background-color: #000000 !important;
}

.sa-bg .site-title, .sa-bg .text-white, .service-area .text-white, .feature-area .text-white {
  color: #ffffff !important;
}

.sa-bg .site-title-tagline, .service-area .site-title-tagline {
  color: #e29a00 !important;
}

/* All text in dark sections should be white - COMPREHENSIVE */
.sa-bg p, 
.sa-bg h1, 
.sa-bg h2, 
.sa-bg h3, 
.sa-bg h4, 
.sa-bg h5, 
.sa-bg h6,
.sa-bg .site-title,
.sa-bg .site-heading,
.sa-bg .site-heading .site-title,
.sa-bg .site-heading h2,
.service-area.sa-bg p, 
.service-area.sa-bg h1, 
.service-area.sa-bg h2, 
.service-area.sa-bg h3, 
.service-area.sa-bg h4, 
.service-area.sa-bg h5, 
.service-area.sa-bg h6,
.service-area.sa-bg .site-title,
.service-area.sa-bg .site-heading,
.service-area.sa-bg .site-heading .site-title,
.service-area.sa-bg .site-heading h2,
.service-area.sa-bg .service-title, 
.service-area.sa-bg .service-text, 
.service-area.sa-bg .service-content,
.testimonial-area p, 
.testimonial-area h1, 
.testimonial-area h2, 
.testimonial-area h3, 
.testimonial-area h4, 
.testimonial-area h5, 
.testimonial-area h6 {
  color: #ffffff !important;
}

/* Testimonial boxes - dark background with white text */
/* Testimonial boxes - dark background with white text */
.testimonial-area.ts-bg .testimonial-quote {
  background: #1a1a1a !important;
  border: 1px solid rgba(226, 154, 0, 0.3) !important;
}

.testimonial-area.ts-bg .testimonial-quote p {
  color: #ffffff !important;
  text-align: justify !important;
}

.testimonial-area.ts-bg .testimonial-author-info h4, 
.testimonial-area.ts-bg .testimonial-author-info p {
  color: #ffffff !important;
}

.testimonial-area.ts-bg .testimonial-quote::before {
  color: #1a1a1a !important;
}

/* Service items in dark sections - comprehensive white text */
.service-area.sa-bg .service-item {
  background: #1a1a1a !important;
  border: 1px solid rgba(226, 154, 0, 0.3) !important;
}

.service-area.sa-bg .service-item * {
  color: #ffffff !important;
}

.service-area.sa-bg .service-title, 
.service-area.sa-bg .service-title a,
.service-area.sa-bg .service-text, 
.service-area.sa-bg .service-content p,
.service-area.sa-bg .service-content, 
.service-area.sa-bg h4,
.service-area.sa-bg .service-content h4,
.service-area.sa-bg .service-content h4 a,
.service-area.sa-bg [style*="color: #333"],
.service-area.sa-bg [style*="color: #666"] {
  color: #ffffff !important;
}

.service-area.sa-bg .service-title a:hover,
.service-area.sa-bg .service-content h4 a:hover {
  color: #e29a00 !important;
}

.service-area.sa-bg .count {
  color: #e29a00 !important;
  -webkit-text-stroke: 1px #e29a00 !important;
  opacity: 0.3 !important;
}

/* Override inline styles in dark sections - high specificity */
.service-area.sa-bg [style*="color: #333"],
.service-area.sa-bg [style*="color: #666"],
.service-area.sa-bg h4[style*="color: #333"],
.service-area.sa-bg .service-title[style*="color: #333"],
.service-area.sa-bg .service-text[style*="color: #666"],
.service-area.sa-bg a[style*="color: #333"],
.service-area.sa-bg p[style*="color: #666"] {
  color: #ffffff !important;
}

/* Force white text in all dark background service items */
.service-area.sa-bg .service-item h4,
.service-area.sa-bg .service-item .service-title,
.service-area.sa-bg .service-item .service-text,
.service-area.sa-bg .service-item p,
.service-area.sa-bg .service-item a {
  color: #ffffff !important;
}

/* All text elements in dark background sections */
.sa-bg p, .sa-bg h1, .sa-bg h2, .sa-bg h3, .sa-bg h4, .sa-bg h5, .sa-bg h6,
.service-area.sa-bg p, .service-area.sa-bg h1, .service-area.sa-bg h2, 
.service-area.sa-bg h3, .service-area.sa-bg h4, .service-area.sa-bg h5, .service-area.sa-bg h6,
.testimonial-area.ts-bg p, .testimonial-area.ts-bg h1, .testimonial-area.ts-bg h2,
.testimonial-area.ts-bg h3, .testimonial-area.ts-bg h4, .testimonial-area.ts-bg h5, .testimonial-area.ts-bg h6 {
  color: #ffffff !important;
}

/* Service items in dark sections - all text white */
.service-area.sa-bg .service-item p,
.service-area.sa-bg .service-item h1,
.service-area.sa-bg .service-item h2,
.service-area.sa-bg .service-item h3,
.service-area.sa-bg .service-item h4,
.service-area.sa-bg .service-item h5,
.service-area.sa-bg .service-item h6,
.service-area.sa-bg .service-title,
.service-area.sa-bg .service-title a,
.service-area.sa-bg .service-text,
.service-area.sa-bg .service-content p {
  color: #ffffff !important;
}

.service-area.sa-bg .service-title a:hover,
.service-area.sa-bg .service-content h4 a:hover {
  color: #e29a00 !important;
}

/* Keep orange for tags and buttons */
.sa-bg .site-title-tagline, .service-area.sa-bg .site-title-tagline,
.testimonial-area.ts-bg .site-title-tagline {
  color: #ffffff !important;
}

/* Footer Black Background */
.footer-area {
  background: #000000 !important;
}

.footer-widget-title, .footer-widget-box p, .footer-widget-box a, .footer-bottom p, .footer-bottom a {
  color: #ffffff !important;
}

/* FAQ Section */
.faq-area .site-title {
  text-align: center !important;
}

.accordion-item {
  border: 1px solid #e29a00 !important;
}

.accordion-button {
  color: #000000 !important;
  background-color: #ffffff !important;
}

.accordion-button:not(.collapsed) {
  background-color: #e29a00 !important;
  color: #ffffff !important;
}

.accordion-body {
  text-align: justify !important;
}

.accordion-button span {
  color: #e29a00 !important;
  font-weight: 700;
  margin-right: 10px;
  font-size: 18px;
}

.accordion-button:not(.collapsed) span {
  color: #ffffff !important;
}

/* Contact Form */
.contact-form input, .contact-form textarea {
  border-color: #e29a00 !important;
}

.contact-form input:focus, .contact-form textarea:focus {
  border-color: #FFAE00 !important;
  box-shadow: 0 0 0 0.2rem rgba(226, 154, 0, 0.25) !important;
}

/* Process/Steps Section */
.process-item {
  border: 2px solid #e29a00 !important;
}

/* Pricing Section */
.pricing-box {
  border: 2px solid #e29a00 !important;
}

.pricing-title, .pricing-amount {
  color: #000000 !important;
}

/* =====================
LAYOUT RESTORATION - CONTAINER & GRID SYSTEM
====================== */

/* Ensure all sections use proper container structure */
section {
  position: relative;
  width: 100%;
}

section .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

/* Restore proper row structure */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

.row > [class*="col-"] {
  padding-left: 15px;
  padding-bottom: 15px;
}

/* Prevent content from floating outside containers */
section > *:not(.container) {
  max-width: 100%;
}

/* Section padding - reasonable defaults */
.pt-120, .py-120 {
  padding-top: 80px;
  padding-bottom: 80px;
}

.pt-80, .pb-80 {
  padding-top: 60px;
  padding-bottom: 60px;
}

/* About Section - Safe theme application */
.about-area {
  background-color: var(--bg-primary) !important;
}

.about-area h1,
.about-area h2,
.about-area h3,
.about-area .site-title {
  color: var(--text-primary) !important;
}

.about-area p,
.about-area .about-text {
  color: var(--text-secondary) !important;
}

/* Testimonials */
.testimonial-area {
  background-color: #000000 !important;
}

.testimonial-area .site-title, .testimonial-area .text-white {
  color: #ffffff !important;
}

/* CTA Section */
.cta-area {
  background-color: #000000 !important;
}

.cta-content h2, .cta-content p {
  color: #ffffff !important;
}

/* Breadcrumb */
/* .site-breadcrumb::before {
  background: #000000 !important;
} */

/* Terms/Privacy Pages */
.terms-content h3, .terms-content p, .privacy-content h3, .privacy-content p {
  color: #000000 !important;
  text-align: justify !important;
}

/* Remove unnecessary highlights */
::selection {
  background: #e29a00 !important;
  color: #ffffff !important;
}

/* Social Links - Remove if not working */
.footer-social a {
  color: #e29a00 !important;
}

/* =====================
CARD LAYOUT - SAFE FLEX WITHOUT BREAKING GRID
====================== */

/* Cards - safe flex that preserves grid structure */
.service-item,
.feature-item,
.pricing-box,
.pricing-item,
.process-item,
.about-item {
  padding: 20px;
  border-radius: 15px;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}

/* Only apply height: 100% in grid contexts where it's safe */
.row.g-4 > [class*="col-"] > .service-item,
.row.g-4 > [class*="col-"] > .feature-item,
.row.g-4 > [class*="col-"] > .pricing-item,
.row.g-4 > [class*="col-"] > .process-item {
  height: 100%;
}

/* Card content - safe flex without breaking layout */
.service-content,
.feature-content,
.pricing-content,
.process-item .content,
.about-item .content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.service-text,
.feature-content p,
.pricing-text,
.process-item .content p,
.about-item .content p {
  flex: 1;
}

/* Orange borders for cards */
.service-item, .feature-item, .pricing-box, .process-item {
  border: 1px solid rgba(226, 154, 0, 0.2) !important;
}

.service-item:hover, .feature-item:hover, .pricing-box:hover, .process-item:hover {
  border-color: #e29a00 !important;
  box-shadow: 0 5px 20px rgba(226, 154, 0, 0.3) !important;
}

/* Ensure row items have equal height */
.row.g-4 > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

.row.g-4 > [class*="col-"] > * {
  flex: 1;
}

/* Content container for consistent width and alignment */
.content-container {
  max-width: 1150px;
  margin: 0 auto;
  padding: 0 20px;
}

.content-container-wide {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Improved text readability */
.content-container p,
.content-container-wide p {
  max-width: 100%;
  line-height: 1.9;
}

.content-container h1,
.content-container h2,
.content-container h3,
.content-container h4,
.content-container-wide h1,
.content-container-wide h2,
.content-container-wide h3,
.content-container-wide h4 {
  margin-bottom: 1.5rem;
}

/* CTA grouping */
.cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

.cta-group p {
  margin-bottom: 0;
}

/* Improved spacing for ecosystem page sections */
.content-container .site-heading,
.content-container-wide .site-heading {
  margin-bottom: 2rem;
}

.content-container .mb-5,
.content-container-wide .mb-5 {
  margin-bottom: 3rem !important;
}

.content-container .mt-5,
.content-container-wide .mt-5 {
  margin-top: 3rem !important;
}

/* Mobile Responsive Styles for Ecosystem and All Pages */
@media all and (max-width: 991px) {
  /* Content container mobile adjustments */
  .content-container,
  .content-container-wide {
    padding: 0 15px;
  }

  /* Typography adjustments for mobile */
  .site-title {
    font-size: 2rem !important;
    line-height: 1.3 !important;
  }

  .site-title h1,
  .site-title h2 {
    font-size: 2rem !important;
    line-height: 1.3 !important;
  }

  h1.site-title {
    font-size: 2rem !important;
  }

  h2.site-title {
    font-size: 1.75rem !important;
  }

  h3.site-title {
    font-size: 1.5rem !important;
  }

  /* Paragraph text mobile */
  .content-container p,
  .content-container-wide p {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }

  /* Section spacing mobile */
  .skill-area {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  .py-120 {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  .py-80 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* Headings spacing mobile */
  .site-heading {
    margin-bottom: 2rem !important;
  }

  .content-container .mb-5,
  .content-container-wide .mb-5 {
    margin-bottom: 2rem !important;
  }

  .content-container .mt-5,
  .content-container-wide .mt-5 {
    margin-top: 2rem !important;
  }

  /* Two column layouts - stack on mobile */
  .row .col-lg-6 {
    margin-bottom: 2rem !important;
  }

  .row .col-lg-6:last-child {
    margin-bottom: 0 !important;
  }

  /* List items mobile */
  ul.list-unstyled {
    padding-left: 0;
  }

  ul.list-unstyled li {
    font-size: 15px !important;
    line-height: 1.8 !important;
    margin-bottom: 0.75rem;
    padding-left: 0;
  }

  /* H4 headings in features/benefits */
  h4.mb-4 {
    font-size: 1.25rem !important;
    margin-bottom: 1.5rem !important;
    text-align: left !important;
  }

  /* CTA buttons mobile */
  .theme-btn,
  .theme-btn2 {
    width: 100% !important;
    display: inline-block;
    text-align: center;
    padding: 12px 24px !important;
    font-size: 16px !important;
    margin-bottom: 1rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .theme-btn:last-child,
  .theme-btn2:last-child {
    margin-bottom: 0 !important;
  }

  /* Button groups - stack on mobile */
  .hero-btn {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    align-items: stretch !important;
  }

  .hero-btn .theme-btn,
  .hero-btn .theme-btn2 {
    width: 100% !important;
    margin: 0 !important;
  }

  .cta-group {
    gap: 1.5rem !important;
    padding: 0 15px;
  }

  .cta-group .theme-btn {
    width: 100% !important;
    max-width: 300px;
  }

  /* Contact cards mobile */
  .contact-card {
    margin-bottom: 1.5rem !important;
  }

  .contact-card:last-child {
    margin-bottom: 0 !important;
  }

  /* Contact form mobile */
  .contact-form-container {
    padding: 25px 20px !important;
    margin: 0 10px;
  }

  .contact-form-header {
    text-align: center !important;
  }

  .contact-form-header h3 {
    font-size: 1.5rem !important;
    margin-bottom: 1rem !important;
  }

  .contact-form-header p {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  /* Tech graphic placeholder mobile */
  .tech-graphic-placeholder {
    min-height: 150px !important;
    margin: 0 10px;
  }

  .tech-graphic-placeholder i {
    font-size: 48px !important;
  }

  /* CTA area mobile */
  .cta-area {
    padding: 40px 15px !important;
  }

  .cta-main-title {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
    margin-bottom: 1.5rem !important;
  }

  .cta-subtitle {
    font-size: 16px !important;
    line-height: 1.7 !important;
    margin-bottom: 2rem !important;
  }

  /* Breadcrumb mobile */
  .site-breadcrumb {
    padding: 60px 0 40px !important;
  }

  .breadcrumb-title {
    font-size: 1.75rem !important;
  }

  /* Integrated Platform heading mobile */
  h2.site-title[style*="font-size: 2.5rem"] {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
  }
}

@media all and (max-width: 767px) {
  /* Extra small mobile adjustments */
  .content-container,
  .content-container-wide {
    padding: 0 15px;
  }

  .site-title {
    font-size: 1.75rem !important;
  }

  h1.site-title {
    font-size: 1.75rem !important;
  }

  h2.site-title {
    font-size: 1.5rem !important;
  }

  h3.site-title {
    font-size: 1.25rem !important;
  }

  .content-container p,
  .content-container-wide p {
    font-size: 15px !important;
  }

  .skill-area {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  .py-120 {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  h4.mb-4 {
    font-size: 1.1rem !important;
  }

  ul.list-unstyled li {
    font-size: 14px !important;
  }

  .theme-btn {
    font-size: 15px !important;
    padding: 10px 20px !important;
  }

  .cta-main-title {
    font-size: 1.5rem !important;
  }

  .cta-subtitle {
    font-size: 15px !important;
  }

  /* Stack buttons vertically on very small screens */
  .cta-group {
    align-items: stretch !important;
  }

  .cta-group .theme-btn {
    max-width: 100% !important;
  }

  /* Hero section mobile */
  .hero-section {
    padding: 60px 0 !important;
  }

  .hero-single {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  .hero-content {
    text-align: center !important;
    margin-bottom: 2rem;
  }

  .hero-single .container .row {
    align-items: flex-start !important;
  }

  .hero-single .container .row [class*="col-"] {
    display: block !important;
  }

  .hero-title {
    font-size: 1.75rem !important;
    line-height: 1.3 !important;
    margin-bottom: 1rem !important;
  }

  .hero-content p {
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin-bottom: 1.5rem !important;
  }

  /* Button wrapper mobile adjustments */
  .hero-btn,
  div[class*="btn"] {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
  }

  /* Contact form fields */
  .contact-form-container .form-group {
    margin-bottom: 1rem !important;
  }

  .contact-form-container textarea {
    min-height: 120px !important;
  }
}

@media all and (max-width: 575px) {
  /* Smallest mobile devices */
  .content-container,
  .content-container-wide {
    padding: 0 12px;
  }

  .site-title {
    font-size: 1.5rem !important;
  }

  h1.site-title {
    font-size: 1.5rem !important;
  }

  h2.site-title {
    font-size: 1.35rem !important;
  }

  .content-container p,
  .content-container-wide p {
    font-size: 14px !important;
  }

  .skill-area {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .py-120 {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  h4.mb-4 {
    font-size: 1rem !important;
  }

  .cta-main-title {
    font-size: 1.35rem !important;
  }

  .hero-title {
    font-size: 1.5rem !important;
  }

  .hero-content p {
    font-size: 14px !important;
  }
}

/* Additional mobile fixes for common alignment issues */
@media all and (max-width: 991px) {
  /* Ensure proper text alignment on mobile */
  .text-center {
    text-align: center !important;
  }

  /* Prevent text overflow */
  * {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* Fix container padding */
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }

  /* Ensure proper spacing for lists */
  ul, ol {
    padding-left: 1.5rem;
  }

  /* Fix image responsiveness and alignment */
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* Hero image alignment - Desktop */
  .hero-single .hero-img {
    text-align: center;
    margin-top: 0;
    padding: 0 15px;
  }

  .hero-single .hero-img img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 15px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
  }

  /* Mobile Hero Image */
  @media all and (max-width: 991px) {
    .hero-single .hero-img {
      margin-top: 2rem;
      padding: 0;
    }

    .hero-single .hero-img img {
      border-radius: 12px;
    }
  }

  /* Feature/service icon alignment */
  .feature-icon,
  .service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
  }

  .feature-icon img,
  .service-icon img {
    width: 100%;
    max-width: 60px;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  /* Tech graphic placeholder alignment */
  .tech-graphic-placeholder {
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Ensure buttons don't overflow */
  .theme-btn,
  .theme-btn2 {
    white-space: normal !important;
    word-wrap: break-word !important;
  }

  /* Fix form elements on mobile */
  .form-control,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px !important; /* Prevents zoom on iOS */
    width: 100% !important;
  }

  /* Ensure proper column stacking */
  [class*="col-"] {
    margin-bottom: 1.5rem;
  }

  [class*="col-"]:last-child {
    margin-bottom: 0;
  }

  /* Fix spacing for feature/service items */
  .feature-item,
  .service-item,
  .pricing-box,
  .process-item {
    margin-bottom: 1.5rem !important;
  }

  /* Fix process item numbers on mobile */
  .process-item .count {
    font-size: 14px !important;
    min-width: 45px !important;
    height: 32px !important;
    line-height: 32px !important;
    padding: 0 10px !important;
  }

  /* Fix process item icon alignment on mobile */
  .process-item .icon {
    width: 55px !important;
    height: 55px !important;
    line-height: 55px !important;
  }

  .process-item .icon img {
    width: 35px !important;
  }

  /* Ensure process item content has proper spacing */
  .process-item .content {
    padding-right: 70px !important;
    min-height: 80px;
  }

  /* Ensure proper table responsiveness */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* ================= end ================== */


/* =====================
COMPREHENSIVE UI FIXES - VISIBILITY, ALIGNMENT, SPACING, CONTRAST
====================== */

/* =====================
1. HERO SECTION FIXES
====================== */

/* Ensure hero text is white and visible */
.hero-single .hero-content .hero-title,
.hero-single .hero-content p,
.hero-single .hero-content .hero-sub-title {
  color: #ffffff !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* Logo visibility - add subtle background on hero section */
.hero-section .navbar-brand {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 8px 15px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.hero-section .navbar-brand:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Feature cards under hero - ensure equal height and alignment */
.feature-area.fta-2 {
  padding-bottom: 80px !important;
}

.feature-area.fta-2 .feature-item {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 280px;
}

.feature-area.fta-2 .feature-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  padding-bottom: 25px;
}

.feature-area.fta-2 .feature-content p {
  flex-grow: 1;
}

/* =====================
2. FEATURES OF FRE8 SECTION
====================== */

/* Section title visibility - ensure white text on dark background */
.service-area.sa-bg .site-heading .site-title,
.service-area.sa-bg h2.site-title {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Feature grid - make icons and headings stand out more */
.service-area.sa-bg .service-item .service-icon {
  filter: brightness(0) saturate(100%) invert(68%) sepia(98%) saturate(1000%) hue-rotate(5deg) brightness(1.2) contrast(1.2);
}

.service-area.sa-bg .service-item .service-title,
.service-area.sa-bg .service-item h4 {
  color: #0b0b0b !important;
  font-weight: 700 !important;
  font-size: 22px !important;
}

.service-area.sa-bg .service-item .service-title a {
  color: #0b0b0b !important;
}

.service-area.sa-bg .service-item .service-title a:hover {
  color: #e29a00 !important;
}

/* Card uniformity - ensure all service items have same height */
.service-area.sa-bg .service-item {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 350px;
  padding: 30px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.service-area.sa-bg .service-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.service-area.sa-bg .service-item .service-text,
.service-area.sa-bg .service-item p {
  color: #333333 !important;
}

.service-area.sa-bg .service-text {
  flex-grow: 1;
}

/* =====================
3. HOW FRE8 WORKS SECTION
====================== */

/* Left-align text inside process cards */
.process-item .content {
  text-align: left !important;
}

.process-item .content p {
  text-align: left !important;
  line-height: 1.8;
}

.process-item .content h4 {
  text-align: left !important;
}

/* Ensure process cards have consistent height */
.process-item {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 200px;
}

.process-item .content {
  flex-grow: 1;
}

/* =====================
4. METRICS/STATS SECTION
====================== */

/* Reduce vertical spacing */
.counter-area {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}

.counter-area .site-heading {
  margin-bottom: 30px !important;
}

/* Text visibility - ensure numbers and text are white */
.counter-box .counter,
.counter-box .title {
  color: #ffffff !important;
  font-weight: 700 !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.counter-box .unit {
  color: #e29a00 !important;
  font-weight: 700 !important;
}

/* =====================
5. CHALLENGE SECTIONS (Truckers/Shippers/Drivers)
====================== */

/* Fix text visibility in challenge sections - override inline styles */
.service-area.sa-bg .challenge-item,
.service-area.sa-bg .challenge-item h4,
.service-area.sa-bg .challenge-item h4[style*="color: #333"],
.service-area.sa-bg .challenge-item h4[style*="color:#333"],
.service-area.sa-bg .challenge-item * {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.service-area.sa-bg .challenge-item i {
  color: var(--accent) !important;
}

.service-area.sa-bg .challenge-item,
.service-area.sa-bg .challenge-item[style*="background: #fff"],
.service-area.sa-bg .challenge-item[style*="background:#fff"] {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 2px solid rgba(226, 154, 0, 0.3) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

.service-area.sa-bg .challenge-item:hover {
  background: rgba(226, 154, 0, 0.2) !important;
  border-color: #e29a00 !important;
}

.service-area.sa-bg .challenge-item i,
.service-area.sa-bg .challenge-item i[style*="color: #e29a00"],
.service-area.sa-bg .challenge-item i[style*="color:#e29a00"] {
  color: #e29a00 !important;
}

/* Ensure challenge section title is visible */
.service-area.sa-bg .site-heading .site-title[style*="color: #e29a00"],
.service-area.sa-bg .site-heading .site-title[style*="color:#e29a00"] {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* =====================
6. CONTACT/CTA SECTIONS
====================== */

/* Change blue background to black */
.interactive-cta::before {
  background: rgba(0, 0, 0, 0.9) !important;
}

.cta-area::before {
  background: rgba(0, 0, 0, 0.8) !important;
}

/* Center-align contact cards */
.interactive-cta .row.g-4.justify-content-center,
.cta-area .row.g-4.justify-content-center {
  justify-content: center !important;
  align-items: stretch;
}

/* Ensure all contact cards are equal width */
.interactive-cta .contact-card {
  width: 100%;
  height: 100%;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Center-align text inside contact cards */
.contact-card h4,
.contact-card p,
.contact-card .contact-link {
  text-align: center !important;
}

/* =====================
7. CONTACT FORM
====================== */

/* Center-align the contact form container */
.contact-form-container {
  margin: 0 auto !important;
  max-width: 800px;
}

/* Left-align text inside inputs */
.contact-form-container input,
.contact-form-container textarea {
  text-align: left !important;
}

.contact-form-container input::placeholder,
.contact-form-container textarea::placeholder {
  text-align: left !important;
}

/* Ensure form inputs fit cleanly */
.contact-form-container .form-control {
  width: 100%;
  padding: 12px 15px;
  font-size: 16px;
}

.contact-form-container .row {
  margin: 0;
}

/* =====================
8. INTEGRATED PLATFORM SECTION
====================== */

/* Center-align headline and description */
.skill-area .site-heading.text-center {
  text-align: center !important;
}

.skill-area .text-center {
  text-align: center !important;
}

.skill-area .text-center p {
  text-align: center !important;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* Improve spacing */
.skill-area .site-heading {
  margin-bottom: 30px !important;
}

/* =====================
9. GENERAL TEXT ALIGNMENT FIXES
====================== */

/* Left-align paragraphs within centered containers */
.content-container p,
.content-container-wide p {
  text-align: left !important;
}

.content-container .text-center p,
.content-container-wide .text-center p {
  text-align: center !important;
}

/* Fix paragraph alignment - left-align within centered containers */
.about-area p,
.skill-area p:not(.text-center p) {
  text-align: left !important;
}

/* Avoid justified spacing that creates word gaps - use left-align instead */
.about-text,
.skill-text {
  text-align: left !important;
}

/* =====================
10. ECOSYSTEM.HTML SPECIFIC FIXES
====================== */

/* Ensure text contrast in ecosystem page */
.skill-area .site-title {
  color: #000000 !important;
  font-weight: 700 !important;
}

.skill-area p {
  color: #333333 !important;
  text-align: left !important;
}

.skill-area .site-heading.text-center .site-title {
  color: white !important;
}

/* Contact section in ecosystem.html */
.interactive-cta .contact-card h4,
.interactive-cta .contact-card p,
.interactive-cta .contact-card .contact-link {
  color: #ffffff !important;
}

/* =====================
11. FEATURE CARDS EQUAL HEIGHT FIX
====================== */

/* Ensure all cards in same section have equal height */
.feature-area .row.g-4 > [class*="col-"],
.service-area .row.g-4 > [class*="col-"],
.process-area .row.g-4 > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

.feature-area .row.g-4 > [class*="col-"] > *,
.service-area .row.g-4 > [class*="col-"] > *,
.process-area .row.g-4 > [class*="col-"] > * {
  flex: 1;
  height: 100%;
}

/* =====================
12. REMOVE OVERLAPPING TEXT AND UI ELEMENTS
====================== */

/* Ensure proper spacing between elements */
.feature-item,
.service-item,
.process-item {
  margin-bottom: 0;
}

.row.g-4 {
  margin-left: -15px;
  margin-right: -15px;
}

.row.g-4 > [class*="col-"] {
  padding-left: 15px;
  padding-right: 15px;
}

/* =====================
13. CARD TYPOGRAPHY SPACING FIXES
====================== */

/* Fix excessive vertical spacing in card components */
/* Reduce line-height for card paragraphs */
.service-item p,
.service-content p,
.service-text,
.feature-item p,
.feature-content p,
.process-item p,
.process-item .content p,
.pricing-box p,
.pricing-content p,
.pricing-text {
  line-height: 1.5 !important;
  margin-bottom: 0 !important;
}

/* Normalize line-height for card headings */
.service-item h1,
.service-item h2,
.service-item h3,
.service-item h4,
.service-item h5,
.service-item h6,
.service-content h1,
.service-content h2,
.service-content h3,
.service-content h4,
.service-content h5,
.service-content h6,
.service-title,
.service-title a,
.feature-item h1,
.feature-item h2,
.feature-item h3,
.feature-item h4,
.feature-item h5,
.feature-item h6,
.feature-content h1,
.feature-content h2,
.feature-content h3,
.feature-content h4,
.feature-content h5,
.feature-content h6,
.process-item h1,
.process-item h2,
.process-item h3,
.process-item h4,
.process-item h5,
.process-item h6,
.process-item .content h1,
.process-item .content h2,
.process-item .content h3,
.process-item .content h4,
.process-item .content h5,
.process-item .content h6,
.pricing-box h1,
.pricing-box h2,
.pricing-box h3,
.pricing-box h4,
.pricing-box h5,
.pricing-box h6,
.pricing-content h1,
.pricing-content h2,
.pricing-content h3,
.pricing-content h4,
.pricing-content h5,
.pricing-content h6 {
  line-height: 1.3 !important;
  margin-bottom: 10px !important;
}

/* Reduce spacing between headings and paragraphs in cards */
.service-content h4 + p,
.service-content .service-title + p,
.service-text:first-child,
.feature-content h4 + p,
.process-item .content h4 + p,
.pricing-content h4 + p {
  margin-top: 8px !important;
}

/* Reduce margin-bottom on headings in cards */
.service-content h4,
.service-content .service-title,
.feature-content h4,
.process-item .content h4,
.pricing-content h4 {
  margin-bottom: 10px !important;
}

/* Override existing margins on card paragraphs */
.service-content p {
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}

.feature-content p {
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}

.process-item .content p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.process-item .content h4 {
  margin-bottom: 10px !important;
}

/* Ensure consistent spacing in service items */
.service-item .service-content {
  gap: 0;
}

.service-item .service-icon + .service-content,
.service-item .service-content:first-child {
  margin-top: 0;
}

/* Ensure consistent spacing in feature items */
.feature-item .feature-content {
  gap: 0;
}

/* Ensure consistent spacing in process items */
.process-item .content {
  gap: 0;
}

/* Ensure consistent spacing in pricing boxes */
.pricing-box .pricing-content {
  gap: 0;
}

/* =====================
14. MOBILE CARD TEXT ALIGNMENT - LEFT ALIGN FOR CLEAN LOOK
====================== */

/* Left-align card text on mobile devices for cleaner appearance */
@media all and (max-width: 991px) {
  /* Feature cards text alignment */
  .feature-item p,
  .feature-content p,
  .feature-content h4,
  .feature-area.fta-2 .feature-content p,
  .feature-area.fta-2 .feature-content h4 {
    text-align: left !important;
  }

  /* Service cards text alignment */
  .service-item p,
  .service-content p,
  .service-text,
  .service-content h4,
  .service-content .service-title,
  .service-content .service-title a {
    text-align: left !important;
  }

  /* Process cards text alignment */
  .process-item p,
  .process-item .content p,
  .process-item .content h4 {
    text-align: left !important;
  }

  /* Pricing cards text alignment */
  .pricing-box p,
  .pricing-content p,
  .pricing-text,
  .pricing-content h4 {
    text-align: left !important;
  }

  /* Ensure card content containers are left-aligned */
  .feature-content,
  .service-content,
  .process-item .content,
  .pricing-content {
    text-align: left !important;
  }
}

/* =====================
15. HERO SECTION MOBILE LIGHT MODE FIXES
====================== */

/* Ensure hero section uses full width and prevents overflow */
.hero-section {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  position: relative;
}

.hero-single {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  position: relative;
}

/* Fix the ::before pseudo-element left offset that causes overflow */
.hero-single::before {
  left: 0 !important;
  width: 100% !important;
}

/* Ensure container doesn't cause overflow */
.hero-single .container {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow-x: hidden !important;
}

/* Mobile-specific fixes for hero section */
@media all and (max-width: 991px) {
  .hero-section {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .hero-single {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .hero-single::before {
    left: 0 !important;
    width: 100% !important;
  }

  .hero-single .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Ensure home-3 class doesn't break layout */
  .home-3 .hero-section {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    margin-top: 0 !important;
    padding-top: 20px !important;
  }

  .home-3 .hero-single {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding-top: clamp(140px, 18vw, 200px) !important;
    padding-bottom: clamp(90px, 14vw, 140px) !important;
  }

  .home-3 .hero-single::before {
    left: 0 !important;
    width: 100% !important;
  }
}

/* Extra small mobile devices */
@media all and (max-width: 767px) {
  .hero-section {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .hero-single {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .hero-single .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .home-3 .hero-section {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .home-3 .hero-single {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}

/* Ensure body/html don't cause overflow */
body, html {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
}

/* =====================
16. MOBILE NAVBAR LOGO FIX FOR LIGHT MODE
====================== */

/* On mobile, ensure navbar has proper background and logo visibility */
@media all and (max-width: 991px) {
  /* Ensure navbar has white background when fixed */
  .navbar.fixed-top {
    background: #ffffff !important;
  }

  /* Ensure logo-scrolled shows on fixed navbar (white background) */
  .navbar.fixed-top .navbar-brand .logo-display {
    display: block !important;
  }

  .navbar.fixed-top .navbar-brand .logo-scrolled {
    display: none !important;
  }

  /* Ensure logo-display shows on transparent navbar (dark background) */
  .navbar:not(.fixed-top) .navbar-brand .logo-display {
    display: block !important;
  }

  .navbar:not(.fixed-top) .navbar-brand .logo-scrolled {
    display: none !important;
  }

  /* Mobile hamburger - visible in light mode */
  [data-theme="light"] .navbar-toggler span,
  :root:not([data-theme="dark"]) .navbar-toggler span {
    border-bottom-color: #9a9a9a !important;
  }
}

/* =====================
17. DARK MODE / LIGHT MODE SYSTEM - TRUE DUAL THEME
====================== */

/* Light Mode (Default) - TRUE LIGHT MODE */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f7f7f7;
  --bg-dark-section: #000000;
  --text-primary: #0b0b0b;
  --text-secondary: #444444;
  --text-white: #ffffff;
  --text-light: #666666;
  --accent: #f4a300;
  --accent-hover: #FFAE00;
  --border-color: rgba(0, 0, 0, 0.08);
  --card-bg: #ffffff;
  --card-bg-dark: #1a1a1a;
}

/* Dark Mode - TRUE DARK MODE */
[data-theme="dark"] {
  --bg-primary: #0b0b0b;
  --bg-secondary: #111111;
  --bg-dark-section: #000000;
  --text-primary: #ffffff;
  --text-secondary: #cccccc;
  --text-white: #ffffff;
  --text-light: #b0b0b0;
  --accent: #f4a300;
  --accent-hover: #FFAE00;
  --border-color: rgba(255, 255, 255, 0.08);
  --card-bg: #1a1a1a;
  --card-bg-dark: #1a1a1a;
}

/* Auto dark mode based on system preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary: #0b0b0b;
    --bg-secondary: #111111;
    --bg-dark-section: #000000;
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --text-white: #ffffff;
    --text-light: #b0b0b0;
    --accent: #f4a300;
    --border-color: rgba(255, 255, 255, 0.08);
    --card-bg: #1a1a1a;
    --card-bg-dark: #1a1a1a;
  }
}

/* Force light mode - TRUE LIGHT MODE */
[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f7f7f7;
  --bg-dark-section: #000000;
  --text-primary: #0b0b0b;
  --text-secondary: #444444;
  --text-white: #ffffff;
  --text-light: #666666;
  --accent: #f4a300;
  --accent-hover: #FFAE00;
  --border-color: rgba(0, 0, 0, 0.08);
  --card-bg: #ffffff;
  --card-bg-dark: #1a1a1a;
}

/* =====================
18. HERO SECTION - RESTORED DARK BACKGROUND DESIGN
====================== */

/* Hero section spacing - Original spacing maintained, center-aligned */
.home-3 .hero-single .hero-content {
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center !important;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.home-3 .hero-single .hero-content .hero-sub-title {
  margin-bottom: 15px !important;
  display: block;
  text-align: center !important;
}

.home-3 .hero-single .hero-content .hero-title {
  margin-top: 15px !important;
  margin-bottom: 20px !important;
  text-align: center !important;
}

.home-3 .hero-single .hero-content p {
  margin-top: 20px !important;
  margin-bottom: 30px !important;
  text-align: center !important;
}

.home-3 .hero-single .hero-content .hero-btn {
  justify-content: center !important;
  gap: 16px !important;
}

/* Hero background - ALWAYS DARK (restored original design) */
.home-3 .hero-single,
[data-theme="light"] .home-3 .hero-single,
[data-theme="dark"] .home-3 .hero-single,
:root:not([data-theme="dark"]) .home-3 .hero-single {
  background: #0b0b0b !important;
}

/* Remove any light overlays */
.home-3 .hero-single::after {
  display: none !important;
}

.home-3 .hero-single .hero-content {
  position: relative;
  z-index: 1;
}

/* Hero headline - Pure white, high contrast, no effects */
.home-3 .hero-single .hero-content .hero-title {
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: none !important;
  -webkit-text-stroke: none !important;
  text-stroke: none !important;
}

/* Hero paragraph - Light gray, improved readability */
.home-3 .hero-single .hero-content p {
  color: #cfcfcf !important;
  line-height: 1.6 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* "Know Us" label - Orange accent, strong contrast */
.home-3 .hero-single .hero-content .hero-sub-title {
  color: #f4a300 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Hero buttons - Orange background, black text, high contrast */
.home-3 .hero-single .hero-content .theme-btn,
.home-3 .hero-single .hero-content .theme-btn2 {
  background: #f4a300 !important;
  color: #000000 !important;
  border-color: #f4a300 !important;
  opacity: 1 !important;
}

.home-3 .hero-single .hero-content .theme-btn:hover,
.home-3 .hero-single .hero-content .theme-btn2:hover {
  background: #FFAE00 !important;
  color: #000000 !important;
  border-color: #FFAE00 !important;
}

/* Hero image container - Rounded corners, soft shadow */
.home-3 .hero-single .hero-img img {
  border-radius: 24px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important;
}

/* Ensure hero buttons container maintains spacing */
.home-3 .hero-single .hero-content .hero-btn {
  margin-top: 30px;
}

/* Override any theme-based button colors in hero section */
.home-3 .hero-single .hero-content .hero-btn .theme-btn,
.home-3 .hero-single .hero-content .hero-btn .theme-btn2 {
  background: #f4a300 !important;
  color: #000000 !important;
  border-color: #f4a300 !important;
}

.home-3 .hero-single .hero-content .hero-btn .theme-btn:hover,
.home-3 .hero-single .hero-content .hero-btn .theme-btn2:hover {
  background: #FFAE00 !important;
  color: #000000 !important;
  border-color: #FFAE00 !important;
}

/* =====================
19. FEATURE ICON STRIP - CENTER ALIGNMENT & TEXT VISIBILITY
====================== */

.feature-area.fta-2 .feature-item {
  text-align: center !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #ffffff !important;
}

.feature-area.fta-2 .feature-content {
  text-align: center !important;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.feature-area.fta-2 .feature-content h4 {
  text-align: center !important;
  width: 100%;
  color: #0b0b0b !important;
  font-weight: 600;
}

.feature-area.fta-2 .feature-content p {
  text-align: center !important;
  width: 100%;
  color: #000000 !important;
  line-height: 1.6;
}

.feature-area.fta-2 .feature-icon {
  text-align: center !important;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.feature-area.fta-2 .count {
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
}

/* Feature icons visibility - Orange icons on white cards */
.feature-area.fta-2 .feature-icon img {
  filter: brightness(0) saturate(100%) invert(68%) sepia(98%) saturate(1000%) hue-rotate(5deg) brightness(1.1) contrast(1.2) !important;
  opacity: 1 !important;
}

/* Feature text - Always dark on white cards for maximum visibility */
.feature-area.fta-2 .feature-content h4 {
  color: #0b0b0b !important;
  font-weight: 600;
}

.feature-area.fta-2 .feature-content p {
  color: #000000 !important;
  line-height: 1.6;
}

/* =====================
20. FEATURES OF FRE8 SECTION - ICON FIXES
====================== */

/* Ensure all icons are visible and orange in both modes */
.service-area.sa-bg .service-icon,
.service-area.sa-bg .service-icon img {
  display: block !important;
  visibility: visible !important;
}

.service-area.sa-bg .service-icon img {
  filter: brightness(0) saturate(100%) invert(68%) sepia(98%) saturate(1000%) hue-rotate(5deg) brightness(1.1) contrast(1.2) !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
}

[data-theme="dark"] .service-area.sa-bg .service-icon img,
[data-theme="light"] .service-area.sa-bg .service-icon img {
  filter: brightness(0) saturate(100%) invert(68%) sepia(98%) saturate(1000%) hue-rotate(5deg) brightness(1.1) contrast(1.2) !important;
  opacity: 1 !important;
}

/* Card background contrast */
.service-area.sa-bg .service-item {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .service-area.sa-bg .service-item,
[data-theme="dark"] .service-area.sa-bg .service-item {
  background: #ffffff !important;
}

/* Ensure service card text is dark on white cards */
.service-area.sa-bg .service-item .service-title,
.service-area.sa-bg .service-item .service-title a,
.service-area.sa-bg .service-item .service-text,
.service-area.sa-bg .service-item p {
  color: #0b0b0b !important;
}

.service-area.sa-bg .service-item .service-title a:hover {
  color: #e29a00 !important;
}

/* Ensure service icons are not hidden */
.service-area.sa-bg .service-item .service-icon {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* =====================
21. METRICS/STATS STRIP - CENTER ALIGNMENT
====================== */

.feature-area.fta-2 {
  padding-top: 40px !important;
}

.feature-area.fta-2 .feature-item {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.feature-area.fta-2 .feature-icon {
  margin: 0 auto 10px;
}

.feature-area.fta-2 .feature-content {
  text-align: center;
  align-items: center;
}

.feature-area.fta-2 .feature-content p {
  text-align: center;
}

.counter-area .row.g-4 {
  justify-content: center !important;
  align-items: center !important;
}

.counter-box {
  text-align: center !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.counter-box .icon {
  text-align: center !important;
  margin: 0 auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  width: 60px;
  height: 60px;
  line-height: 60px;
}

.counter-box .icon img {
  filter: brightness(0) saturate(100%) invert(68%) sepia(98%) saturate(1000%) hue-rotate(5deg) brightness(1.1) contrast(1.2);
  margin: 0 auto;
  width: 40px;
}

.counter-box .content {
  text-align: center !important;
  width: 100%;
}

.counter-box .info {
  text-align: center !important;
  justify-content: center;
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.counter-box .title {
  text-align: center !important;
  margin-top: 10px;
}

/* Remove gaps between counter boxes */
.counter-area .row.g-4 > [class*="col-"] {
  padding-left: 15px;
  padding-right: 15px;
}

/* Stats text visibility - white text on dark background area */
.counter-area .site-title,
.counter-area h3 {
  color: #ffffff !important;
}

/* Counter box text - dark text on white cards */
.counter-box .title {
  color: #0b0b0b !important;
}

.counter-box .counter {
  color: #0b0b0b !important;
}

.counter-box .unit {
  color: #f4a300 !important;
}

/* =====================
22. ONBOARD YOUR FLEET SECTION
====================== */

.cta-area {
  position: relative;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Ensure logistics image is used, not brown background */
.cta-area[style*="background-image"] {
  background-image: url('../img/track/01.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Overlay for text contrast */
.cta-area::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 0;
}

[data-theme="dark"] .cta-area::before {
  background: rgba(0, 0, 0, 0.75);
}

[data-theme="light"] .cta-area::before {
  background: rgba(0, 0, 0, 0.7);
}

.cta-area .container {
  position: relative;
  z-index: 1;
}

.cta-content {
  text-align: center !important;
}

.cta-content h1 {
  color: #ffffff !important;
  text-align: center !important;
}

.cta-content p {
  color: #ffffff !important;
  text-align: center !important;
}

/* Center-align buttons */
.cta-area .hero-btn {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 15px;
  flex-wrap: wrap;
}

.cta-area .theme-btn,
.cta-area .theme-btn2 {
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 24px !important;
}

/* =====================
23. INTEGRATED PLATFORM SECTION
====================== */

.integrated-platform-section {
  position: relative;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.integrated-platform-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(226, 154, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%);
  z-index: 0;
}

.integrated-platform-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../img/shape/02.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.08;
  z-index: 0;
  pointer-events: none;
}

[data-theme="dark"] .integrated-platform-section::before {
  background: linear-gradient(135deg, rgba(226, 154, 0, 0.15) 0%, rgba(0, 0, 0, 0.4) 100%);
}

[data-theme="light"] .integrated-platform-section::before {
  background: linear-gradient(135deg, rgba(226, 154, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%);
}

.integrated-platform-section .container {
  position: relative;
  z-index: 1;
}

/* Center-align heading and paragraph */
.integrated-platform-section .site-heading.text-center {
  text-align: center !important;
}

.integrated-platform-section .text-center {
  text-align: center !important;
}

.integrated-platform-section .text-center p {
  text-align: center !important;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* Text visibility */
.integrated-platform-section .site-title {
  color: var(--text-primary) !important;
}

.integrated-platform-section p {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .integrated-platform-section .site-title {
  color: #ffffff !important;
}

[data-theme="dark"] .integrated-platform-section p {
  color: #e0e0e0 !important;
}

[data-theme="light"] .integrated-platform-section .site-title {
  color: #000000 !important;
}

[data-theme="light"] .integrated-platform-section p {
  color: #333333 !important;
}

/* =====================
24. FRE8 ALLIANCE SECTION
====================== */

/* Graphic above FRE8 Alliance section */
.fre8-alliance-section {
  position: relative;
}

.alliance-graphic {
  position: relative;
  z-index: 1;
}

.alliance-graphic i {
  color: #e29a00 !important;
}

[data-theme="dark"] .alliance-graphic i {
  color: #e29a00 !important;
  opacity: 0.9;
}

[data-theme="light"] .alliance-graphic i {
  color: #e29a00 !important;
  opacity: 0.8;
}

/* Center-align CTA button */
.cta-group {
  text-align: center !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.cta-group .theme-btn {
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 24px !important;
}

.cta-group p {
  text-align: center !important;
}

/* =====================
25. TRANSPORT MANAGEMENT SYSTEM
====================== */

.skill-area .text-center p {
  text-align: center !important;
  line-height: 1.8;
  margin-bottom: 20px;
}

.skill-area .site-heading.text-center {
  text-align: center !important;
}

/* Text visibility */
.skill-area .site-title {
  color: var(--text-primary) !important;
}

.skill-area p {
  color: var(--text-secondary) !important;
}

/* =====================
26. GLOBAL BUTTON CENTER ALIGNMENT - THEME AWARE
====================== */

/* All orange buttons - center aligned globally */
.theme-btn,
.theme-btn2,
button.theme-btn,
button.theme-btn,
button.theme-btn2,
a.theme-btn,
a.theme-btn2 {
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 24px !important;
  vertical-align: middle !important;
  min-height: 44px;
  line-height: 1.2;
}

.theme-btn i,
.theme-btn2 i {
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  line-height: 1;
}

/* Light Mode Buttons - High Contrast (black text on orange) */
[data-theme="light"] .theme-btn,
[data-theme="light"] .theme-btn2,
:root:not([data-theme="dark"]) .theme-btn,
:root:not([data-theme="dark"]) .theme-btn2 {
  color: #000000 !important;
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}

[data-theme="light"] .theme-btn:hover,
[data-theme="light"] .theme-btn2:hover,
:root:not([data-theme="dark"]) .theme-btn:hover,
:root:not([data-theme="dark"]) .theme-btn2:hover {
  background-color: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  color: #000000 !important;
}

/* Dark Mode Buttons - White text on orange */
[data-theme="dark"] .theme-btn,
[data-theme="dark"] .theme-btn2 {
  color: #ffffff !important;
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}

[data-theme="dark"] .theme-btn:hover,
[data-theme="dark"] .theme-btn2:hover {
  background-color: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  color: #ffffff !important;
}

/* Hero buttons */
.hero-btn .theme-btn,
.hero-btn .theme-btn2 {
  text-align: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* All button containers center their buttons */
.hero-btn,
.cta-group,
.pricing-btn,
.about-content .theme-btn,
.service-content .theme-btn {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

/* =====================
27. GENERAL TEXT READABILITY - BOTH MODES
====================== */

/* Body text - Theme-Aware */
body {
  color: var(--text-secondary) !important;
  background-color: var(--bg-primary) !important;
}

/* Headings - Theme-Aware */
h1, h2, h3, h4, h5, h6,
.site-title,
.heading,
.title {
  color: var(--text-primary) !important;
}

/* Paragraphs - Theme-Aware */
p {
  color: var(--text-secondary) !important;
}

/* Links - Theme-Aware */
a {
  color: var(--text-primary) !important;
}

a:hover {
  color: var(--accent) !important;
}

/* Dark sections maintain white text */
.sa-bg,
.service-area.sa-bg,
.testimonial-area.ts-bg {
  background-color: #000000 !important;
}

/* SAFE: Only apply white text to specific text elements, NOT all children */
.sa-bg h1,
.sa-bg h2,
.sa-bg h3,
.sa-bg h4,
.sa-bg h5,
.sa-bg h6,
.sa-bg p,
.sa-bg li,
.sa-bg span,
.sa-bg .site-title,
.service-area.sa-bg h1,
.service-area.sa-bg h2,
.service-area.sa-bg h3,
.service-area.sa-bg h4,
.service-area.sa-bg h5,
.service-area.sa-bg h6,
.service-area.sa-bg p,
.service-area.sa-bg li,
.service-area.sa-bg span,
.service-area.sa-bg .site-title,
.testimonial-area.ts-bg h1,
.testimonial-area.ts-bg h2,
.testimonial-area.ts-bg h3,
.testimonial-area.ts-bg h4,
.testimonial-area.ts-bg h5,
.testimonial-area.ts-bg h6,
.testimonial-area.ts-bg p,
.testimonial-area.ts-bg li,
.testimonial-area.ts-bg span,
.testimonial-area.ts-bg .site-title {
  color: #ffffff !important;
}

.sa-bg .site-title-tagline,
.service-area.sa-bg .site-title-tagline,
.testimonial-area.ts-bg .site-title-tagline {
  color: #ffffff !important;
}

/* =====================
28. FINAL QUALITY CHECKS - NO OVERLAPS, READABILITY
====================== */

/* Prevent text overlaps */
.hero-content,
.about-content,
.service-content,
.feature-content,
.process-item .content {
  position: relative;
  z-index: 1;
}

/* Ensure proper spacing - no collisions */
.hero-content .hero-sub-title {
  margin-bottom: 15px !important;
}

.hero-content .hero-title {
  margin-top: 15px !important;
  margin-bottom: 20px !important;
}

.hero-content p {
  margin-top: 20px !important;
  margin-bottom: 30px !important;
}

/* Ensure all icons are visible */
img[src*="icon"],
.service-icon img,
.feature-icon img,
.counter-box .icon img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure proper contrast ratios */
[data-theme="light"] body {
  background-color: #ffffff;
  color: #000000;
}

[data-theme="dark"] body {
  background-color: #000000;
  color: #ffffff;
}

/* Ensure headings are readable */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6,
[data-theme="light"] .site-title {
  color: #000000 !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .site-title {
  color: #ffffff !important;
}

/* Ensure paragraphs are readable */
[data-theme="light"] p {
  color: #333333 !important;
}

[data-theme="dark"] p {
  color: #e0e0e0 !important;
}

/* Prevent visual hierarchy issues */
.site-heading {
  margin-bottom: 30px !important;
}

.site-heading .site-title {
  margin-bottom: 15px !important;
}

/* Ensure buttons are always visible and readable */
.theme-btn,
.theme-btn2 {
  min-width: 120px;
  white-space: nowrap;
}

/* Ensure proper line heights for readability */
p {
  line-height: 1.8 !important;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.3 !important;
}

/* =====================
GLOBAL CARD TEXT VISIBILITY FIX - MANDATORY
Ensures ALL text, numbers, and icons are visible in cards
====================== */

/* ALL CARDS - Explicit text color rules (NO inheritance) */
.service-item,
.feature-item,
.pricing-item,
.process-item,
.challenge-item,
.card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}

/* Card Headings - Explicit colors (NO inherit - causes visibility issues) */
/* Headings will use explicit light/dark mode rules below */

/* Light mode card headings - Explicit black */
:root:not([data-theme="dark"]) .service-item h1,
:root:not([data-theme="dark"]) .service-item h2,
:root:not([data-theme="dark"]) .service-item h3,
:root:not([data-theme="dark"]) .service-item h4,
:root:not([data-theme="dark"]) .service-item h5,
:root:not([data-theme="dark"]) .service-item h6,
:root:not([data-theme="dark"]) .feature-item h4,
:root:not([data-theme="dark"]) .pricing-item h5,
:root:not([data-theme="dark"]) .pricing-item strong,
:root:not([data-theme="dark"]) .pricing-item h1,
:root:not([data-theme="dark"]) .pricing-item h2,
:root:not([data-theme="dark"]) .pricing-item h3,
:root:not([data-theme="dark"]) .pricing-item h4,
:root:not([data-theme="dark"]) .pricing-item h6,
:root:not([data-theme="dark"]) .pricing-item .pricing-header h5,
:root:not([data-theme="dark"]) .pricing-item .pricing-amount strong,
:root:not([data-theme="dark"]) .process-item h4,
:root:not([data-theme="dark"]) .card h1,
:root:not([data-theme="dark"]) .card h2,
:root:not([data-theme="dark"]) .card h3,
:root:not([data-theme="dark"]) .card h4,
:root:not([data-theme="dark"]) .card h5,
:root:not([data-theme="dark"]) .card h6 {
  color: #000000 !important;
}

/* Dark mode card headings */
[data-theme="dark"] .service-item h1,
[data-theme="dark"] .service-item h2,
[data-theme="dark"] .service-item h3,
[data-theme="dark"] .service-item h4,
[data-theme="dark"] .service-item h5,
[data-theme="dark"] .service-item h6,
[data-theme="dark"] .feature-item h4,
[data-theme="dark"] .pricing-item h5,
[data-theme="dark"] .process-item h4,
[data-theme="dark"] .card h1,
[data-theme="dark"] .card h2,
[data-theme="dark"] .card h3,
[data-theme="dark"] .card h4,
[data-theme="dark"] .card h5,
[data-theme="dark"] .card h6 {
  color: var(--card-text-dark-primary) !important;
}

/* Card Paragraphs - Explicit colors with inherit fallback */
.service-item p,
.service-item .service-text,
.service-item .service-content p,
.service-item span,
.service-item li,
.feature-item p,
.feature-item .feature-content p,
.feature-item span,
.feature-item li,
.pricing-item p,
.pricing-item .pricing-text,
.pricing-item .pricing-amount-type,
.pricing-item span,
.pricing-item li,
.process-item p,
.process-item .content p,
.process-item span,
.process-item li,
.challenge-item p,
.challenge-item span,
.card p,
.card .card-text,
.card .description,
.card .subtitle,
.card span,
.card li,
/* About item text - explicit black in light mode */
:root:not([data-theme="dark"]) .about-item p,
:root:not([data-theme="dark"]) .about-item span {
  color: #000000 !important;
}

[data-theme="dark"] .about-item p,
[data-theme="dark"] .about-item span {
  color: var(--text-secondary) !important;
}

/* Light mode card paragraphs - Explicit black/dark gray */
:root:not([data-theme="dark"]) .service-item p,
:root:not([data-theme="dark"]) .feature-item p,
:root:not([data-theme="dark"]) .pricing-item p,
:root:not([data-theme="dark"]) .pricing-item li,
:root:not([data-theme="dark"]) .pricing-item span,
:root:not([data-theme="dark"]) .pricing-item .pricing-text,
:root:not([data-theme="dark"]) .pricing-item .pricing-amount-type,
:root:not([data-theme="dark"]) .pricing-feature li,
:root:not([data-theme="dark"]) .pricing-feature li *,
:root:not([data-theme="dark"]) .process-item p,
:root:not([data-theme="dark"]) .card p,
:root:not([data-theme="dark"]) .card li,
:root:not([data-theme="dark"]) .card span {
  color: #000000 !important;
}

/* Dark mode card paragraphs */
[data-theme="dark"] .service-item p,
[data-theme="dark"] .feature-item p,
[data-theme="dark"] .pricing-item p,
[data-theme="dark"] .pricing-item li,
[data-theme="dark"] .process-item p,
[data-theme="dark"] .card p,
[data-theme="dark"] .card li {
  color: var(--card-text-dark-secondary) !important;
}

/* =====================
CARD NUMBERS (01, 02, 03...) - VISIBILITY FIX
====================== */

/* Card numbers - visible on both light and dark cards */
.service-item .count,
.feature-item .count,
.card .count,
.card-number {
  color: var(--accent) !important;
  -webkit-text-stroke: 1px var(--accent);
  opacity: 0.6 !important;
  font-weight: 800 !important;
}

/* Process item count - black text on orange background for visibility */
.process-item .count {
  color: #000000 !important;
  background: var(--accent) !important;
  opacity: 1 !important;
  -webkit-text-stroke: none !important;
}

/* =====================
CARD ICONS - CURRENTCOLOR & THEME AWARE
====================== */

/* Icons in cards - use currentColor and accent */
.service-item .service-icon i,
.service-item .service-icon svg,
.service-item .icon,
.feature-item .feature-icon i,
.feature-item .feature-icon svg,
.feature-item .icon,
.pricing-item .icon i,
.pricing-item .icon svg,
.pricing-item .icon,
.process-item .icon i,
.process-item .icon svg,
.process-item .icon,
.card .icon i,
.card .icon svg,
.card .icon,
.challenge-item i,
.challenge-item svg,
.about-item .icon i,
.about-item .icon svg {
  color: var(--accent) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* SVG icons - ensure they respect theme */
.service-item svg,
.feature-item svg,
.pricing-item svg,
.process-item svg,
.card svg {
  fill: currentColor !important;
  stroke: currentColor !important;
  color: var(--accent) !important;
}

/* Card Icon Images - Filter to accent color (SVG/PNG icons) */
.service-item .service-icon img,
.feature-item .feature-icon img,
.process-item .icon img,
.pricing-item .icon img,
.card .icon img,
.about-item .icon img {
  filter: brightness(0) saturate(100%) invert(68%) sepia(98%) saturate(1000%) hue-rotate(5deg) brightness(1.1) contrast(1.2) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Dark sections - override card text to white */
.service-area.sa-bg .service-item h1,
.service-area.sa-bg .service-item h2,
.service-area.sa-bg .service-item h3,
.service-area.sa-bg .service-item h4,
.service-area.sa-bg .service-item h5,
.service-area.sa-bg .service-item h6,
.service-area.sa-bg .service-item .service-title,
.service-area.sa-bg .service-item p,
.service-area.sa-bg .service-item .service-text,
.service-area.sa-bg .service-item span,
.service-area.sa-bg .service-item li {
  color: #ffffff !important;
}

.service-area.sa-bg .challenge-item h1,
.service-area.sa-bg .challenge-item h2,
.service-area.sa-bg .challenge-item h3,
.service-area.sa-bg .challenge-item h4,
.service-area.sa-bg .challenge-item h5,
.service-area.sa-bg .challenge-item h6,
.service-area.sa-bg .challenge-item p,
.service-area.sa-bg .challenge-item span {
  color: #ffffff !important;
}

/* White background sections - ensure dark text */
.about-area:not(.sa-bg) .about-item,
.about-area:not(.sa-bg) .about-item h6,
.about-area:not(.sa-bg) .about-item p,
.skill-area:not(.sa-bg) .service-item,
.skill-area:not(.sa-bg) .service-item h4,
.skill-area:not(.sa-bg) .service-item p,
.process-area:not(.sa-bg) .process-item,
.process-area:not(.sa-bg) .process-item h4,
.process-area:not(.sa-bg) .process-item p,
.pricing-area:not(.sa-bg) .pricing-item,
.pricing-area:not(.sa-bg) .pricing-item h5,
.pricing-area:not(.sa-bg) .pricing-item p,
.pricing-area:not(.sa-bg) .pricing-item li {
  color: var(--text-primary) !important;
}

/* =====================
LAYOUT VALIDATION & MOBILE RESPONSIVENESS
====================== */

/* Ensure containers don't overflow on mobile */
@media all and (max-width: 991px) {
  .container {
    padding: 0 15px;
  }
  
  .about-area .row {
    flex-direction: column;
  }
  
  .about-left {
    margin-bottom: 40px;
  }
  
  .about-img {
    max-width: 100%;
  }
  
  .about-experience {
    right: 10px;
    bottom: 10px;
  }
  
  /* Ensure cards stack properly on mobile */
  .row.g-4 > [class*="col-"] {
    margin-bottom: 20px;
  }
}

/* Prevent absolute positioning from breaking layout */
.about-experience,
.process-item .count,
.service-item .count {
  position: absolute;
  z-index: 2;
}

/* Ensure CTA buttons stay in flow */
.about-right .theme-btn,
.about-content + .theme-btn {
  margin-top: 24px;
  display: inline-block;
  position: relative;
}

/* =====================
=======================================================
UI SYSTEM ARCHITECTURE & HARDENING
=======================================================
This section defines the hardened architecture to prevent regressions.
DO NOT MODIFY without understanding the full system.
=======================================================
====================== */

/* =====================
STEP 1: LOCK BASE LAYOUT (NON-NEGOTIABLE)
====================== */

/* 
LAYOUT RULES ARE FROZEN - DO NOT MODIFY
These rules define structure, spacing, and positioning.
Theme changes MUST NOT affect these rules.
*/

/* Container System - Locked */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

/* Grid System - Locked */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

.row > [class*="col-"] {
  padding-left: 15px;
  padding-right: 15px;
}

/* Spacing System - Locked */
.pt-120, .py-120 {
  padding-top: 80px;
  padding-bottom: 80px;
}

.pt-80, .pb-80 {
  padding-top: 60px;
  padding-bottom: 60px;
}

/* 
🚫 FORBIDDEN IN LAYOUT LAYER:
- Colors (use theme tokens only)
- Theme-specific positioning
- Display changes based on theme
*/

/* =====================
STEP 2: THEME CONTRACT (STRICT - NON-NEGOTIABLE)
====================== */

/*
THEME TOKENS - FIXED CONTRACT
All components MUST use these tokens. No exceptions.

REQUIRED TOKENS:
--bg-primary          → Page background
--bg-secondary        → Section background
--surface             → Card/surface background
--text-primary         → Headings, primary text
--text-secondary       → Body text, paragraphs
--text-muted          → Helper text, placeholders
--icon-primary        → Icon color
--accent               → Accent color (buttons, links)
--border              → Border color

RULES:
1. Every text element MUST use text-* token
2. Every icon MUST use icon-primary or accent
3. Every card MUST use surface
4. NO hex colors in components
5. NO custom color variables
*/

/* Theme Contract Validation - Light Mode */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f7f7f7;
  --surface: #ffffff;
  --text-primary: #0b0b0b;
  --text-secondary: #444444;
  --text-muted: #6b6b6b;
  --icon-primary: #0b0b0b;
  --accent: #f4a300;
  --border: #e5e5e5;
}

/* Theme Contract Validation - Dark Mode */
[data-theme="dark"] {
  --bg-primary: #0b0b0b;
  --bg-secondary: #111111;
  --surface: #141414;
  --text-primary: #ffffff;
  --text-secondary: #cfcfcf;
  --text-muted: #9a9a9a;
  --icon-primary: #ffffff;
  --accent: #f4a300;
  --border: #2a2a2a;
}

/* =====================
STEP 3: COMPONENT ISOLATION (CRITICAL)
====================== */

/*
COMPONENT ARCHITECTURE
Each component MUST be self-contained and own its visibility.
Components MUST NOT rely on inherited colors.
*/

/* Card Component - Isolated */
.card,
.service-item,
.feature-item,
.pricing-item,
.process-item,
.about-item {
  /* Structure (from layout layer) */
  position: relative;
  padding: 20px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  
  /* Theme (from theme layer) */
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
}

/* Card Text - Explicit (no inheritance) */
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.service-item h1, .service-item h2, .service-item h3, .service-item h4,
.feature-item h4, .pricing-item h5, .process-item h4 {
  color: var(--text-primary) !important;
}

.card p, .card li, .card span,
.service-item p, .service-item li,
.feature-item p, .feature-item li,
.pricing-item p, .pricing-item li,
.process-item p, .process-item li {
  color: var(--text-secondary) !important;
}

/* Icon Component - Isolated */
.icon,
.service-icon,
.feature-icon,
.pricing-item .icon,
.process-item .icon {
  color: var(--accent) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Button Component - Isolated */
.theme-btn,
.theme-btn2,
.btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #000000 !important;
}

[data-theme="dark"] .theme-btn,
[data-theme="dark"] .theme-btn2,
[data-theme="dark"] .btn-primary {
  color: #ffffff !important;
}

/* =====================
STEP 4: FORBIDDEN RULES (TEAM-WIDE ENFORCEMENT)
====================== */

/*
🚫 ABSOLUTELY FORBIDDEN - These patterns cause regressions:

1. ❌ Global color selectors:
   * { color: ... }
   body * { color: ... }
   section * { color: ... }

2. ❌ Global layout overrides:
   * { display: flex }
   * { text-align: center }
   * { position: absolute }

3. ❌ Hard-coded colors in components:
   .card { color: #000000; }
   .button { background: #fff; }

4. ❌ SVG hard-coded fills:
   <svg fill="#fff">
   Use: fill="currentColor" or CSS fill: currentColor

5. ❌ Opacity for readability:
   .text { opacity: 0.5; }
   Use proper contrast colors instead

6. ❌ Theme overrides in layout:
   .container { background: #fff; }
   Use theme tokens: background: var(--bg-primary);

7. ❌ Layout changes based on theme:
   [data-theme="dark"] .row { display: block; }
   Layout must be theme-agnostic

VIOLATION CONSEQUENCES:
- Layout breaks
- Text disappears
- Icons become invisible
- Theme switching fails
- Components become unpredictable
*/

/* =====================
STEP 5: VISUAL REGRESSION SAFETY CHECKLIST
====================== */

/*
MANDATORY VALIDATION CHECKLIST
Before committing any CSS changes, verify:

LAYOUT INTEGRITY:
✔ No content floating outside containers
✔ No large unexplained white spaces
✔ Grid structure intact
✔ Spacing consistent
✔ Mobile layout stacks correctly

TEXT VISIBILITY:
✔ All headings visible in light mode
✔ All headings visible in dark mode
✔ All paragraphs readable
✔ No invisible text on cards
✔ No text color matches background

ICON VISIBILITY:
✔ Icons visible on white cards
✔ Icons visible on dark cards
✔ Icons use accent color
✔ SVG icons respect theme
✔ No icon blobs or missing icons

COMPONENT ISOLATION:
✔ Cards work independently
✔ Buttons visible in both modes
✔ Forms readable in both modes
✔ Navigation visible in both modes

THEME STABILITY:
✔ Light mode looks correct
✔ Dark mode looks correct
✔ Theme switching works
✔ No layout shifts on theme change
✔ No color bleeding between components

AUTOMATED CHECKS (Recommended):
- Screenshot comparison (light vs dark)
- Accessibility contrast checks
- Visual regression testing
- Cross-browser testing
*/

/* =====================
STEP 6: ARCHITECTURE DOCUMENTATION
====================== */

/*
CSS ARCHITECTURE LAYERS:

1. LAYOUT LAYER (Lines 1-1000)
   - Containers, grids, spacing
   - Positioning, flex, display
   - NO colors, NO theme dependencies

2. THEME LAYER (Lines 70-200)
   - CSS variables (tokens)
   - Light/dark mode definitions
   - Color definitions only

3. COMPONENT LAYER (Lines 2000+)
   - Card, Button, Icon components
   - Uses theme tokens
   - Owns its visibility
   - NO layout rules

4. UTILITY LAYER (Scattered)
   - Helper classes
   - Overrides (use sparingly)
   - Theme-aware utilities

SEPARATION OF CONCERNS:
- Layout → Structure only
- Theme → Colors only
- Components → Behavior + Theme
- Utilities → Helpers only

MODIFICATION RULES:
1. Layout changes → Layout layer only
2. Color changes → Theme layer only
3. Component fixes → Component layer only
4. Never mix concerns
*/

/* =====================
STEP 7: COMPONENT OWNERSHIP MATRIX
====================== */

/*
COMPONENT RESPONSIBILITIES:

Card Component:
- Owns: background, border, text colors
- Uses: var(--surface), var(--border), var(--text-primary)
- Never: relies on body color, uses hard-coded colors

Icon Component:
- Owns: color, fill, stroke
- Uses: var(--accent), currentColor
- Never: hard-coded fills, opacity hacks

Button Component:
- Owns: background, text color, border
- Uses: var(--accent), explicit text colors
- Never: inherited colors, theme-dependent layout

Text Component:
- Owns: color
- Uses: var(--text-primary), var(--text-secondary)
- Never: inherited colors, opacity for contrast

Each component is a contract:
- Input: Theme tokens
- Output: Visible, readable UI
- Guarantee: Works in both light and dark mode
*/

/* =====================
STEP 8: FUTURE-PROOFING GUIDELINES
====================== */

/*
WHEN ADDING NEW COMPONENTS:

1. Define structure in layout layer
2. Use theme tokens for colors
3. Explicitly set all text/icon colors
4. Test in both light and dark mode
5. Document component contract

WHEN MODIFYING EXISTING COMPONENTS:

1. Check if change affects layout → Layout layer
2. Check if change affects colors → Theme layer
3. Check if change affects component → Component layer
4. Never mix layers
5. Always test both themes

WHEN DEBUGGING ISSUES:

1. Check forbidden rules first
2. Verify component isolation
3. Check theme token usage
4. Verify layout integrity
5. Test in both themes

PREVENTION IS BETTER THAN FIXING:
- Follow architecture
- Use theme tokens
- Isolate components
- Test thoroughly
- Document changes
*/

/* =====================
FINAL OVERRIDE - ALL CARD TEXT VISIBILITY (LIGHT MODE)
This rule comes last to override any conflicting rules
====================== */

/* Force ALL card text to black by default (light mode) */
.service-item,
.service-item h1, .service-item h2, .service-item h3, .service-item h4, .service-item h5, .service-item h6,
.service-item p, .service-item span, .service-item li,
.service-item .service-title, .service-item .service-content h4, .service-item .service-text,
.feature-item,
.feature-item h1, .feature-item h2, .feature-item h3, .feature-item h4, .feature-item h5, .feature-item h6,
.feature-item p, .feature-item span, .feature-item li,
.feature-item .feature-content h4, .feature-item .feature-content p,
.pricing-item,
.pricing-item *,
.pricing-item h1, .pricing-item h2, .pricing-item h3, .pricing-item h4, .pricing-item h5, .pricing-item h6,
.pricing-item p, .pricing-item span, .pricing-item li,
.pricing-item ul, .pricing-item ul li,
.pricing-item strong, .pricing-item .pricing-header h5,
.pricing-item .pricing-amount, .pricing-item .pricing-amount strong, .pricing-item .pricing-amount-type,
.pricing-item .pricing-text,
.pricing-feature,
.pricing-feature *, .pricing-feature li, .pricing-feature ul, .pricing-feature ul li,
.pricing-feature li span, .pricing-feature li a,
.process-item,
.process-item h1, .process-item h2, .process-item h3, .process-item h4, .process-item h5, .process-item h6,
.process-item p, .process-item span, .process-item li,
.process-item .content h4, .process-item .content p,
.card,
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.card p, .card span, .card li,
.card .card-title, .card .card-header, .card .card-text, .card .description, .card .subtitle,
.about-item,
.about-item h6, .about-item p, .about-item span,
.about-item .content h6, .about-item .content p {
  color: #000000 !important;
}

/* Exception: Icons stay orange */
.service-item i, .service-item .fas, .service-item .far, .service-item .fab,
.feature-item i, .feature-item .fas, .feature-item .far, .feature-item .fab,
.pricing-item i, .pricing-item .fas, .pricing-item .far, .pricing-item .fab,
.pricing-feature li i, .pricing-feature li .fas, .pricing-feature li .far, .pricing-feature li .fab,
.process-item i, .process-item .fas, .process-item .far, .process-item .fab,
.card i, .card .fas, .card .far, .card .fab {
  color: var(--accent) !important;
}

/* Exception: Not-include items muted */
.pricing-item .not-include,
.pricing-feature li .not-include,
.pricing-feature li .not-include * {
  color: #666666 !important;
}

/* Exception: Buttons keep their styling */
.service-item .theme-btn, .service-item .theme-btn *,
.feature-item .theme-btn, .feature-item .theme-btn *,
.pricing-item .theme-btn, .pricing-item .theme-btn *,
.pricing-item button, .pricing-item button *,
.card .theme-btn, .card .theme-btn *,
.card button, .card button * {
  color: inherit !important;
}

/* Dark mode override - use theme tokens */
[data-theme="dark"] .service-item,
[data-theme="dark"] .service-item h1, [data-theme="dark"] .service-item h2, [data-theme="dark"] .service-item h3,
[data-theme="dark"] .service-item h4, [data-theme="dark"] .service-item h5, [data-theme="dark"] .service-item h6,
[data-theme="dark"] .service-item p, [data-theme="dark"] .service-item span, [data-theme="dark"] .service-item li,
[data-theme="dark"] .feature-item,
[data-theme="dark"] .feature-item h1, [data-theme="dark"] .feature-item h2, [data-theme="dark"] .feature-item h3,
[data-theme="dark"] .feature-item h4, [data-theme="dark"] .feature-item h5, [data-theme="dark"] .feature-item h6,
[data-theme="dark"] .feature-item p, [data-theme="dark"] .feature-item span, [data-theme="dark"] .feature-item li,
[data-theme="dark"] .pricing-item,
[data-theme="dark"] .pricing-item h1, [data-theme="dark"] .pricing-item h2, [data-theme="dark"] .pricing-item h3,
[data-theme="dark"] .pricing-item h4, [data-theme="dark"] .pricing-item h5, [data-theme="dark"] .pricing-item h6,
[data-theme="dark"] .pricing-item p, [data-theme="dark"] .pricing-item span, [data-theme="dark"] .pricing-item li,
[data-theme="dark"] .pricing-feature li,
[data-theme="dark"] .process-item,
[data-theme="dark"] .process-item h1, [data-theme="dark"] .process-item h2, [data-theme="dark"] .process-item h3,
[data-theme="dark"] .process-item h4, [data-theme="dark"] .process-item h5, [data-theme="dark"] .process-item h6,
[data-theme="dark"] .process-item p, [data-theme="dark"] .process-item span, [data-theme="dark"] .process-item li,
[data-theme="dark"] .card,
[data-theme="dark"] .card h1, [data-theme="dark"] .card h2, [data-theme="dark"] .card h3,
[data-theme="dark"] .card h4, [data-theme="dark"] .card h5, [data-theme="dark"] .card h6,
[data-theme="dark"] .card p, [data-theme="dark"] .card span, [data-theme="dark"] .card li,
[data-theme="dark"] .about-item,
[data-theme="dark"] .about-item h6, [data-theme="dark"] .about-item p, [data-theme="dark"] .about-item span {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .service-item p, [data-theme="dark"] .service-item span, [data-theme="dark"] .service-item li,
[data-theme="dark"] .feature-item p, [data-theme="dark"] .feature-item span, [data-theme="dark"] .feature-item li,
[data-theme="dark"] .pricing-item p, [data-theme="dark"] .pricing-item span, [data-theme="dark"] .pricing-item li,
[data-theme="dark"] .pricing-feature li,
[data-theme="dark"] .process-item p, [data-theme="dark"] .process-item span, [data-theme="dark"] .process-item li,
[data-theme="dark"] .card p, [data-theme="dark"] .card span, [data-theme="dark"] .card li,
[data-theme="dark"] .about-item p, [data-theme="dark"] .about-item span {
  color: var(--text-secondary) !important;
}

/* Hard fix: ensure card text is visible in dark sections */
.service-area.sa-bg .service-item,
.process-area .process-item,
.pricing-area .pricing-item,
.about-area .about-item {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

.service-area.sa-bg .service-item h1,
.service-area.sa-bg .service-item h2,
.service-area.sa-bg .service-item h3,
.service-area.sa-bg .service-item h4,
.service-area.sa-bg .service-item h5,
.service-area.sa-bg .service-item h6,
.service-area.sa-bg .service-item p,
.service-area.sa-bg .service-item span,
.service-area.sa-bg .service-item li,
.service-area.sa-bg .service-item .service-title,
.service-area.sa-bg .service-item .service-text,
.process-area .process-item h1,
.process-area .process-item h2,
.process-area .process-item h3,
.process-area .process-item h4,
.process-area .process-item h5,
.process-area .process-item h6,
.process-area .process-item p,
.process-area .process-item span,
.process-area .process-item li,
.process-area .process-item .content h4,
.process-area .process-item .content p,
.pricing-area .pricing-item h1,
.pricing-area .pricing-item h2,
.pricing-area .pricing-item h3,
.pricing-area .pricing-item h4,
.pricing-area .pricing-item h5,
.pricing-area .pricing-item h6,
.pricing-area .pricing-item p,
.pricing-area .pricing-item span,
.pricing-area .pricing-item li,
.pricing-area .pricing-item .pricing-amount,
.pricing-area .pricing-item .pricing-amount strong,
.pricing-area .pricing-item .pricing-amount-type,
.about-area .about-item h6,
.about-area .about-item p,
.about-area .about-item span,
.about-area .about-item .content h6,
.about-area .about-item .content p {
  color: #0b0b0b !important;
}

/* Pricing card headings - reduce size */
.pricing-area .pricing-item h5 {
  font-size: 24px;
  line-height: 1.2;
}

[data-theme="dark"] .service-area.sa-bg .service-item h1,
[data-theme="dark"] .service-area.sa-bg .service-item h2,
[data-theme="dark"] .service-area.sa-bg .service-item h3,
[data-theme="dark"] .service-area.sa-bg .service-item h4,
[data-theme="dark"] .service-area.sa-bg .service-item h5,
[data-theme="dark"] .service-area.sa-bg .service-item h6,
[data-theme="dark"] .service-area.sa-bg .service-item p,
[data-theme="dark"] .service-area.sa-bg .service-item span,
[data-theme="dark"] .service-area.sa-bg .service-item li,
[data-theme="dark"] .service-area.sa-bg .service-item .service-title,
[data-theme="dark"] .service-area.sa-bg .service-item .service-text,
[data-theme="dark"] .process-area .process-item h1,
[data-theme="dark"] .process-area .process-item h2,
[data-theme="dark"] .process-area .process-item h3,
[data-theme="dark"] .process-area .process-item h4,
[data-theme="dark"] .process-area .process-item h5,
[data-theme="dark"] .process-area .process-item h6,
[data-theme="dark"] .process-area .process-item p,
[data-theme="dark"] .process-area .process-item span,
[data-theme="dark"] .process-area .process-item li,
[data-theme="dark"] .process-area .process-item .content h4,
[data-theme="dark"] .process-area .process-item .content p,
[data-theme="dark"] .pricing-area .pricing-item h1,
[data-theme="dark"] .pricing-area .pricing-item h2,
[data-theme="dark"] .pricing-area .pricing-item h3,
[data-theme="dark"] .pricing-area .pricing-item h4,
[data-theme="dark"] .pricing-area .pricing-item h5,
[data-theme="dark"] .pricing-area .pricing-item h6,
[data-theme="dark"] .pricing-area .pricing-item p,
[data-theme="dark"] .pricing-area .pricing-item span,
[data-theme="dark"] .pricing-area .pricing-item li,
[data-theme="dark"] .pricing-area .pricing-item .pricing-amount,
[data-theme="dark"] .pricing-area .pricing-item .pricing-amount strong,
[data-theme="dark"] .pricing-area .pricing-item .pricing-amount-type,
[data-theme="dark"] .about-area .about-item h6,
[data-theme="dark"] .about-area .about-item p,
[data-theme="dark"] .about-area .about-item span,
[data-theme="dark"] .about-area .about-item .content h6,
[data-theme="dark"] .about-area .about-item .content p {
  color: #0b0b0b !important;
}

/* =====================
END OF UI SYSTEM ARCHITECTURE & HARDENING
====================== */

/* =====================
FINAL CARD TEXT FIX - DARK MODE WHITE CARDS
====================== */
[data-theme="dark"] .pricing-area .pricing-item,
[data-theme="dark"] .process-area .process-item,
[data-theme="dark"] .about-area .about-item,
[data-theme="dark"] .service-area.sa-bg .service-item {
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}

[data-theme="dark"] .pricing-area .pricing-item *,
[data-theme="dark"] .pricing-area .pricing-item h1,
[data-theme="dark"] .pricing-area .pricing-item h2,
[data-theme="dark"] .pricing-area .pricing-item h3,
[data-theme="dark"] .pricing-area .pricing-item h4,
[data-theme="dark"] .pricing-area .pricing-item h5,
[data-theme="dark"] .pricing-area .pricing-item h6,
[data-theme="dark"] .pricing-area .pricing-item p,
[data-theme="dark"] .pricing-area .pricing-item span,
[data-theme="dark"] .pricing-area .pricing-item li,
[data-theme="dark"] .pricing-area .pricing-item .pricing-amount,
[data-theme="dark"] .pricing-area .pricing-item .pricing-amount strong,
[data-theme="dark"] .pricing-area .pricing-item .pricing-amount-type,
[data-theme="dark"] .process-area .process-item h1,
[data-theme="dark"] .process-area .process-item h2,
[data-theme="dark"] .process-area .process-item h3,
[data-theme="dark"] .process-area .process-item h4,
[data-theme="dark"] .process-area .process-item h5,
[data-theme="dark"] .process-area .process-item h6,
[data-theme="dark"] .process-area .process-item p,
[data-theme="dark"] .process-area .process-item span,
[data-theme="dark"] .process-area .process-item li,
[data-theme="dark"] .process-area .process-item .content h4,
[data-theme="dark"] .process-area .process-item .content p,
[data-theme="dark"] .about-area .about-item h6,
[data-theme="dark"] .about-area .about-item p,
[data-theme="dark"] .about-area .about-item span,
[data-theme="dark"] .about-area .about-item .content h6,
[data-theme="dark"] .about-area .about-item .content p,
[data-theme="dark"] .service-area.sa-bg .service-item h1,
[data-theme="dark"] .service-area.sa-bg .service-item h2,
[data-theme="dark"] .service-area.sa-bg .service-item h3,
[data-theme="dark"] .service-area.sa-bg .service-item h4,
[data-theme="dark"] .service-area.sa-bg .service-item h5,
[data-theme="dark"] .service-area.sa-bg .service-item h6,
[data-theme="dark"] .service-area.sa-bg .service-item p,
[data-theme="dark"] .service-area.sa-bg .service-item span,
[data-theme="dark"] .service-area.sa-bg .service-item li,
[data-theme="dark"] .service-area.sa-bg .service-item .service-title,
[data-theme="dark"] .service-area.sa-bg .service-item .service-text {
  color: #0b0b0b !important;
}

/* Pricing list hard fix - force list text to render */
.pricing-area .pricing-feature ul {
  padding-left: 0 !important;
}

.pricing-area .pricing-feature li {
  color: #0b0b0b !important;
  font-size: 14px;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  visibility: visible !important;
  opacity: 1 !important;
}

.pricing-area .pricing-feature li i {
  flex: 0 0 auto;
  margin-top: 2px;
}

[data-theme="dark"] .pricing-area .pricing-feature li {
  color: #0b0b0b !important;
}

/* Force all pricing text visible on white cards (dark mode) */
[data-theme="dark"] .pricing-area .pricing-item * {
  color: #0b0b0b !important;
}

[data-theme="dark"] .pricing-area .pricing-item i,
[data-theme="dark"] .pricing-area .pricing-item .fas,
[data-theme="dark"] .pricing-area .pricing-item .far,
[data-theme="dark"] .pricing-area .pricing-item .fab {
  color: var(--accent) !important;
}

/* FINAL PRICING TEXT OVERRIDE - FORCE BLACK */
.pricing-area .pricing-item,
.pricing-area .pricing-item h1,
.pricing-area .pricing-item h2,
.pricing-area .pricing-item h3,
.pricing-area .pricing-item h4,
.pricing-area .pricing-item h5,
.pricing-area .pricing-item h6,
.pricing-area .pricing-item p,
.pricing-area .pricing-item span,
.pricing-area .pricing-item li,
.pricing-area .pricing-item .pricing-amount,
.pricing-area .pricing-item .pricing-amount strong,
.pricing-area .pricing-item .pricing-amount-type,
.pricing-area .pricing-feature li,
.pricing-area .pricing-feature li span,
.pricing-area .pricing-feature li a {
  color: #000000 !important;
}

/* Absolute final fix for pricing list text rendering */
.pricing-area .pricing-item .pricing-feature li,
.pricing-area .pricing-item .pricing-feature li *,
.pricing-area .pricing-item .pricing-feature li span,
.pricing-area .pricing-item .pricing-feature li a {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  text-fill-color: #000000 !important;
}

/* Numbered badges layout fix for process cards (01–05) */
.process-item {
  position: relative;
  padding-top: 48px;
}

.process-item .count {
  position: absolute;
  top: 5px;
  left: 7px;
  z-index: 2;
  margin: 0;
}

.process-item .icon {
  position: absolute;
  top: 8px;
  right: 10px;
}

.process-item .content {
  margin-top: 8px;
}

/* Ecosystem dark sections - white in dark mode only */
[data-theme="dark"] .ecosystem-dark-section .site-title,
[data-theme="dark"] .ecosystem-dark-section h1,
[data-theme="dark"] .ecosystem-dark-section h2,
[data-theme="dark"] .ecosystem-dark-section h3,
[data-theme="dark"] .ecosystem-dark-section h4,
[data-theme="dark"] .ecosystem-dark-section p,
[data-theme="dark"] .ecosystem-dark-section li {
  color: #ffffff !important;
}

/* Ecosystem sections - readable text in light mode */
[data-theme="light"] .ecosystem-dark-section .site-title,
[data-theme="light"] .ecosystem-dark-section h1,
[data-theme="light"] .ecosystem-dark-section h2,
[data-theme="light"] .ecosystem-dark-section h3,
[data-theme="light"] .ecosystem-dark-section h4,
[data-theme="light"] .ecosystem-dark-section p,
[data-theme="light"] .ecosystem-dark-section li {
  color: var(--text-primary) !important;
}

/* Ensure FRE8 PRO headings stay white in dark mode */
[data-theme="dark"] .ecosystem-dark-section .site-heading .site-title {
  color: #ffffff !important;
}

/* Hard override for FRE8 PRO headings (dark mode) */
[data-theme="dark"] .ecosystem-dark-section .site-heading h2.site-title,
[data-theme="dark"] .ecosystem-dark-section .site-heading h3.site-title {
  color: #ffffff !important;
}

/* Ecosystem icons - keep same visibility in light mode as dark */
[data-theme="light"] .ecosystem-dark-section i,
[data-theme="light"] .ecosystem-dark-section .fas,
[data-theme="light"] .ecosystem-dark-section .far,
[data-theme="light"] .ecosystem-dark-section .fab {
  color: #e29a00 !important;
}

/* Ecosystem icons - identical in dark and light modes */
.ecosystem-dark-section i,
.ecosystem-dark-section .fas,
.ecosystem-dark-section .far,
.ecosystem-dark-section .fab {
  color: #e29a00 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ecosystem contact form header text - force black */
.contact-form-container .contact-form-header h3,
.contact-form-container .contact-form-header p {
  color: #000000 !important;
}

/* Contact page light mode readability */
[data-theme="light"] .contact-area .contact-info .content h5,
[data-theme="light"] .contact-area .contact-info .content p,
[data-theme="light"] .contact-area .contact-info .content a,
[data-theme="light"] .contact-form-header h2,
[data-theme="light"] .contact-form-header p,
[data-theme="light"] .contact-form .form-control,
[data-theme="light"] .contact-form .form-control::placeholder {
  color: #000000 !important;
}