/*
 * Tejasweb Solutions – Redesign 2025
 * Palette: Deep Navy (#1e3a5f) + Orange (#f97316)
 * Clean & Minimal override layer — loaded after style.css
 */

/* =========================================
   1. DESIGN TOKENS
   ========================================= */
:root {
  /* Navy — primary */
  --tw-primary:        #1e3a5f;
  --tw-primary-dark:   #16325a;
  --tw-primary-mid:    #2a5085;
  --tw-primary-light:  #e8f0f8;
  --tw-primary-ring:   rgba(30,58,95,0.15);

  /* Orange — accent / CTA */
  --tw-accent:         #f97316;
  --tw-accent-dark:    #ea6c00;
  --tw-accent-light:   #fff7ed;
  --tw-accent-ring:    rgba(249,115,22,0.2);

  /* Neutrals */
  --tw-text-heading:   #0f172a;
  --tw-text-body:      #4b5563;
  --tw-text-muted:     #9ca3af;

  --tw-border:         #e2e8f0;
  --tw-bg-page:        #ffffff;
  --tw-bg-subtle:      #f8fafc;

  /* Radius */
  --tw-radius:         10px;
  --tw-radius-lg:      16px;
  --tw-radius-pill:    50px;

  /* Shadows */
  --tw-shadow-xs:      0 1px 3px rgba(0,0,0,0.07);
  --tw-shadow-sm:      0 2px 10px rgba(0,0,0,0.06);
  --tw-shadow-md:      0 4px 20px rgba(0,0,0,0.08);
  --tw-shadow-navy:    0 12px 32px rgba(30,58,95,0.14), 0 4px 12px rgba(0,0,0,0.05);
  --tw-shadow-orange:  0 12px 32px rgba(249,115,22,0.18), 0 4px 12px rgba(0,0,0,0.05);
}

/* =========================================
   2. BASE
   ========================================= */
body {
  font-size: 16px !important;
  color: var(--tw-text-body);
  background-color: var(--tw-bg-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--tw-text-heading);
  letter-spacing: -0.022em;
}

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

::selection      { background-color: var(--tw-accent); color: #fff; }
::-moz-selection { background-color: var(--tw-accent); color: #fff; }

/* =========================================
   3. GLOBAL COLOR OVERRIDES
   ========================================= */
.text-color-primary   { color: var(--tw-accent)       !important; }
.text-color-secondary { color: var(--tw-primary)       !important; }
.bg-theme-default     { background: var(--tw-primary)  !important; }
.theme-bg-secondary   { background: var(--tw-primary)  !important; }
.bg-gray, .bg-gray-2  { background-color: var(--tw-bg-subtle) !important; }
.bg-light-blue        { background-color: var(--tw-bg-subtle) !important; }
.bg-theme-three       { background: var(--tw-primary-dark) !important; }

/* =========================================
   4. HEADER
   ========================================= */

/* Remove the old top info bar */
.header-top-bar-info { display: none !important; }



/* Shrink logo slightly to give nav more room */
.header__logo a img {
  width: 130px !important;
  height: auto !important;
}

/* Main nav wrapper */
.header-bottom-wrap {
  border-bottom: 1px solid var(--tw-border) !important;
  background: rgba(255,255,255,0.97) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.header-bottom-wrap.is-sticky {
  box-shadow: 0 2px 24px rgba(0,0,0,0.08) !important;
}

/* Desktop nav links */
.navigation-menu > ul > li > a {
  color: var(--tw-text-heading) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 24px 10px !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  transition: color 0.2s ease !important;
}
.navigation-menu > ul > li > a:hover span,
.navigation-menu > ul > li.active > a span {
  color: var(--tw-accent) !important;
}

/* Active underline */
.navigation-menu > ul > li > a:before {
  background-color: var(--tw-accent) !important;
  height: 2px !important;
}

/* Dropdown submenu */
.navigation-menu .submenu {
  border-top: 2px solid var(--tw-accent) !important;
  border-radius: 0 0 var(--tw-radius) var(--tw-radius) !important;
  box-shadow: var(--tw-shadow-md) !important;
}
.navigation-menu .submenu li a {
  color: var(--tw-text-heading) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
.navigation-menu .submenu li a:hover {
  color: var(--tw-accent) !important;
  padding-left: 30px !important;
}

/* "Get Started" CTA pill in nav — orange */
.header-nav-cta {
  display: inline-flex;
  align-items: center;
  background: var(--tw-accent);
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 8px 18px !important;
  border-radius: var(--tw-radius-pill);
  margin-left: 10px;
  letter-spacing: 0 !important;
  transition: all 0.22s ease;
  box-shadow: 0 3px 12px var(--tw-accent-ring);
  white-space: nowrap;
  line-height: 1 !important;
  text-decoration: none !important;
}
.header-nav-cta:hover {
  background: var(--tw-accent-dark) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(249,115,22,0.32);
}

/* =========================================
   5. SECTION LABELS
   ========================================= */
.section-sub-title {
  display: inline-block !important;
  color: var(--tw-accent) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  background: var(--tw-accent-light) !important;
  padding: 5px 14px !important;
  border-radius: var(--tw-radius-pill) !important;
  line-height: 1.5 !important;
}

/* =========================================
   6. HERO SECTION
   ========================================= */
.service-hero-bg {
  background-image: none !important;
  background-color: transparent !important;
}

.service-hero-wrapper {
  background: linear-gradient(135deg, #0a1628 0%, #0f2444 40%, #1e3a5f 100%) !important;
  position: relative;
  overflow: hidden;
}

/* Orange glow + subtle pattern overlay */
.service-hero-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 55% at 75% 25%, rgba(249,115,22,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 45% at 15% 80%, rgba(30,58,95,0.4) 0%, transparent 55%);
  pointer-events: none;
}

/* Soft fade to white at the bottom */
.service-hero-wrapper::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, #ffffff);
  pointer-events: none;
}

.service-hero-space {
  height: 680px !important;
}
@media (max-width: 991px) { .service-hero-space { height: 560px !important; } }
@media (max-width: 767px) { .service-hero-space { height: 500px !important; } }

.service-hero-wrap { position: relative; z-index: 2; }

.service-hero-text h3 {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--tw-accent) !important;
  margin-bottom: 16px !important;
}

.service-hero-text h1 {
  font-size: 64px !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  color: #ffffff !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 0 !important;
}

.service-hero-text p {
  font-size: 18px !important;
  line-height: 1.7 !important;
  color: rgba(203,213,225,0.88) !important;
  max-width: 560px;
  margin: 20px auto 0 !important;
}

@media (max-width: 767px) {
  .service-hero-text h1 { font-size: 38px !important; }
  .service-hero-text p  { font-size: 16px !important; }
}

/* =========================================
   7. BUTTONS
   ========================================= */
.ht-btn {
  border-radius: var(--tw-radius) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0 !important;
  padding: 14px 28px !important;
  transition: all 0.22s ease !important;
  line-height: 1.4 !important;
  height: auto !important;
}

/* Default primary button — navy */
.ht-btn:not(.btn--outline):not(.ht-btn--outline) {
  background: var(--tw-primary) !important;
  border: 1px solid var(--tw-primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px var(--tw-primary-ring);
}
.ht-btn:not(.btn--outline):not(.ht-btn--outline):hover {
  background: var(--tw-primary-dark) !important;
  border-color: var(--tw-primary-dark) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(30,58,95,0.25);
}

/* Hero CTA buttons */
.service-hero-btn {
  gap: 16px !important;
  margin-top: 36px !important;
}
.service-hero-btn .ht-btn {
  min-width: 185px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 14px 30px !important;
  border-radius: var(--tw-radius) !important;
}

/* First CTA — orange solid */
.service-hero-btn .ht-btn:first-child {
  background: var(--tw-accent) !important;
  border-color: var(--tw-accent) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 18px var(--tw-accent-ring) !important;
}
.service-hero-btn .ht-btn:first-child:hover {
  background: var(--tw-accent-dark) !important;
  border-color: var(--tw-accent-dark) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(249,115,22,0.3) !important;
}

/* Second CTA — ghost */
.service-hero-btn .btn--outline,
.service-hero-btn .ht-btn:last-child {
  background: transparent !important;
  border: 2px solid rgba(255,255,255,0.35) !important;
  color: #ffffff !important;
}
.service-hero-btn .btn--outline:hover,
.service-hero-btn .ht-btn:last-child:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.7) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

/* Generic .btn--primary / .btn--outline (service pages) */
.btn--primary {
  background: var(--tw-primary) !important;
  border-color: var(--tw-primary) !important;
  color: #fff !important;
  border-radius: var(--tw-radius) !important;
}
.btn--primary:hover {
  background: var(--tw-primary-dark) !important;
  border-color: var(--tw-primary-dark) !important;
  color: #fff !important;
}
.btn--outline {
  border-color: var(--tw-primary) !important;
  color: var(--tw-primary) !important;
  border-radius: var(--tw-radius) !important;
}
.btn--outline:hover {
  background: var(--tw-primary) !important;
  color: #fff !important;
}

/* =========================================
   8. ABOUT / COMPANY HISTORY + VIDEO SECTION
   ========================================= */
.our-company-history { background: var(--tw-bg-page); }

/* Remove decorative grid lines */
.our-company-history .grid-wrapper { display: none; }

.our-company-history .inner-button-box .ht-btn {
  background: var(--tw-primary) !important;
  border-color: var(--tw-primary) !important;
  color: #fff !important;
}
.our-company-history .inner-button-box .ht-btn:hover {
  background: var(--tw-primary-dark) !important;
}

/* ---- Video play button ---- */
/* Circle background: orange */
.video-link .ht-popup-video .video-button__two .video-play {
  background: var(--tw-accent) !important;
  box-shadow: 0 8px 30px rgba(249,115,22,0.45) !important;
  border: none !important;
}
.video-link .ht-popup-video .video-button__two .video-play:hover {
  background: var(--tw-accent-dark) !important;
  transform: scale(1.08);
}

/* Play icon colour */
.video-link .ht-popup-video .video-button__two .video-play-icon::before {
  border-left-color: #fff !important;
}

/* Video overlay tint */
.video-link .ht-popup-video.video-overlay {
  background-color: rgba(30,58,95,0.55) !important;
}

/* Wave-pulse ring colour → orange */
.video-link .ht-popup-video.video-button .video-mark .wave-pulse::after,
.video-link .ht-popup-video.video-button .video-mark .wave-pulse::before {
  border-color: var(--tw-accent) !important;
}

/* Gradation step wave-pulse → accent */
.ht-gradation.style-01 .wave-pulse::before,
.ht-gradation.style-01 .wave-pulse::after {
  border-color: rgba(249,115,22,0.35) !important;
}

/* Banner image cards — subtle shadow + rounded */
.rv-video-section .ht-banner-01 img,
.rv-video-section .ht-banner-02 img,
.rv-video-section .ht-banner-03 img,
.rv-video-section .ht-banner-04 img {
  border-radius: var(--tw-radius) !important;
  box-shadow: var(--tw-shadow-navy) !important;
}

/* =========================================
   9. MISSION SECTION
   ========================================= */
.mission-section-wrapper { background: var(--tw-bg-subtle) !important; }

.single-mission-item .icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--tw-accent-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.single-mission-item .icon i {
  font-size: 20px !important;
  color: var(--tw-accent) !important;
}

.mission-card {
  border: 1px solid var(--tw-border) !important;
  border-radius: var(--tw-radius-lg) !important;
  box-shadow: var(--tw-shadow-sm) !important;
  transition: all 0.25s ease !important;
}
.mission-card:hover {
  box-shadow: var(--tw-shadow-navy) !important;
  border-color: rgba(30,58,95,0.18) !important;
  transform: translateY(-4px);
}

/* =========================================
   10. WHAT WE DO
   ========================================= */
.what-we-do-wrapper { background: var(--tw-bg-page) !important; }

.what-we-do-content .it-solution-list li i { color: var(--tw-accent) !important; }

.floating-badge {
  border-radius: var(--tw-radius) !important;
  box-shadow: var(--tw-shadow-md) !important;
}
.badge-top-left     { border-top: 3px solid var(--tw-accent)   !important; }
.badge-bottom-right { border-bottom: 3px solid var(--tw-accent) !important; }
.badge-center-right { border-right: 3px solid var(--tw-accent)  !important; }

.floating-badge .text-color-primary { color: var(--tw-accent) !important; }

/* =========================================
   11. CORE SERVICES CARDS
   ========================================= */
.feature-icon-wrapper { background: var(--tw-bg-subtle) !important; }

.ht-box-icon.style-02.service-card-modern {
  background: var(--tw-bg-page) !important;
  border: 1px solid var(--tw-border) !important;
  border-radius: var(--tw-radius-lg) !important;
  box-shadow: var(--tw-shadow-xs) !important;
  transition: all 0.25s ease !important;
}
.ht-box-icon.style-02.service-card-modern:hover {
  box-shadow: var(--tw-shadow-orange) !important;
  border-color: rgba(249,115,22,0.25) !important;
  transform: translateY(-6px);
}

/* Icon circle — orange */
.service-card-modern .icon {
  width: 62px !important;
  height: 62px !important;
  background: var(--tw-accent-light) !important;
  border-radius: 50% !important;
}
.service-card-modern .icon i { color: var(--tw-accent) !important; }

.service-card-modern:hover .icon { background: var(--tw-accent) !important; }
.service-card-modern:hover .icon i { color: #fff !important; }

.service-card-modern .content .heading {
  color: var(--tw-text-heading) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}
.service-card-modern .content .text {
  color: var(--tw-text-body) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}
.service-card-modern .feature-btn a {
  color: var(--tw-primary) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}
.service-card-modern .feature-btn a:hover { color: var(--tw-accent) !important; }

/* =========================================
   12. WHO WE WORK WITH
   ========================================= */
.who-we-work-with-wrapper { background: var(--tw-bg-subtle) !important; }

.client-card {
  background: var(--tw-bg-page) !important;
  border: 1px solid var(--tw-border) !important;
  border-radius: var(--tw-radius-lg) !important;
  box-shadow: none !important;
  transition: all 0.25s ease !important;
}
.client-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--tw-shadow-orange) !important;
  border-color: rgba(249,115,22,0.25) !important;
}

/* Icon circle — orange */
.client-card i {
  font-size: 22px !important;
  color: var(--tw-accent) !important;
  background: var(--tw-accent-light) !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 20px !important;
}
.client-card h5 { color: var(--tw-text-heading) !important; font-size: 17px !important; font-weight: 700 !important; }
.client-card p  { color: var(--tw-text-body) !important; font-size: 14px !important; }

/* =========================================
   13. HOW WE WORK (GRADATION STEPS)
   ========================================= */
.gradation-process-area { background: var(--tw-bg-page); }

.gradation-title-wrapper .gradation-sub-heading h3 mark {
  color: var(--tw-accent);
  font-weight: 800;
}

/* Step circles — orange */
.ht-gradation .circle-wrap h6.circle {
  background: var(--tw-accent) !important;
  border-color: var(--tw-accent) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px var(--tw-accent-ring) !important;
}

.ht-gradation .item .line { background-color: var(--tw-border) !important; }

.ht-gradation .content-wrap h6.heading {
  color: var(--tw-text-heading) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
}
.ht-gradation .content-wrap .text {
  color: var(--tw-text-body) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
}
.gradation-btn {
  color: var(--tw-accent) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* Wave pulse colour */
.wave-pulse-1::before,
.wave-pulse-2::before,
.wave-pulse-3::before { background: var(--tw-accent) !important; }

/* =========================================
   14. BLOG SECTION
   ========================================= */
.service-projects-wrapper { background: var(--tw-bg-page); }

.post-info a,
.btn-text a { color: var(--tw-primary) !important; font-weight: 600; }
.btn-text a:hover { color: var(--tw-accent) !important; }
.post-date   { color: var(--tw-text-muted) !important; }

/* =========================================
   15. CONTACT / CTA SECTION
   ========================================= */
.contact-us-area.service-contact-bg {
  background: linear-gradient(135deg, #0a1628 0%, #0f2444 50%, #1e3a5f 100%) !important;
}

.contact-form-service-wrap {
  background: var(--tw-bg-page);
  border-radius: var(--tw-radius-lg);
  padding: 40px 36px !important;
  box-shadow: var(--tw-shadow-md);
}

.contact-info.service-contact .contact-info-title-wrap p.sub-text {
  color: rgba(203,213,225,0.8) !important;
}

.ht-star-rating span { color: #f59e0b !important; }

.single-contact-list .icon span {
    color: #ffffff !important;
}

/* Form inputs */
.contact-form .contact-inner input,
.contact-form .contact-inner textarea,
.contact-form select {
  border: 1px solid var(--tw-border) !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  padding: 14px 18px !important;
  height: auto !important;
  background: #fff !important;
  color: var(--tw-text-heading) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.contact-form select { height: 52px !important; padding: 0 18px !important; }

.contact-form .contact-inner input:focus,
.contact-form .contact-inner textarea:focus,
.contact-form select:focus {
  border-color: var(--tw-accent) !important;
  box-shadow: 0 0 0 3px var(--tw-accent-ring) !important;
  outline: none !important;
}

/* Submit button — orange */
.contact-form .comment-submit-btn .ht-btn {
  background: var(--tw-accent) !important;
  border-color: var(--tw-accent) !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 14px 32px !important;
  font-weight: 700 !important;
}
.contact-form .comment-submit-btn .ht-btn:hover {
  background: var(--tw-accent-dark) !important;
  border-color: var(--tw-accent-dark) !important;
}

/* =========================================
   16. FOOTER
   ========================================= */
.footer-area-wrapper {
  background: #0d1f35 !important;
}

.footer-area-wrapper .footer-widget__logo img { opacity: 0.92; }

.footer-area-wrapper .footer-widget__title {
  color: #f1f5f9 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
}
.footer-area-wrapper .footer-widget__list li {
  color: #94a3b8 !important;
  font-size: 14px !important;
  margin-bottom: 10px !important;
  line-height: 1.7 !important;
}
.footer-area-wrapper .footer-widget__list li a {
  color: #94a3b8 !important;
  transition: color 0.2s ease;
}
.footer-area-wrapper .footer-widget__list li a:hover,
.footer-area-wrapper .footer-widget__list li a.hover-style-link:hover {
  color: var(--tw-accent) !important;
}
.footer-area-wrapper .footer-widget__list li .text-color-primary {
  color: var(--tw-accent) !important;
}

.footer-copyright-area {
  background: #091929 !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}
.footer-copyright-area .copyright-text,
.footer-copyright-area .copyright-text a { color: #64748b !important; }
.footer-copyright-area .copyright-text a:hover { color: var(--tw-accent) !important; }

/* Social icons */
.ht-social-networks.solid-rounded-icon .item .social-link {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #94a3b8 !important;
  transition: all 0.22s ease !important;
}
.ht-social-networks.solid-rounded-icon .item .social-link:hover {
  background: var(--tw-accent) !important;
  border-color: var(--tw-accent) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* =========================================
   17. SCROLL-TO-TOP BUTTON
   ========================================= */
.scroll-top {
  background: var(--tw-accent) !important;
  border-color: var(--tw-accent) !important;
  border-radius: 50% !important;
}
.scroll-top:hover { background: var(--tw-accent-dark) !important; }

/* =========================================
   18. MOBILE MENU
   ========================================= */
.mobile-menu-overlay,
.mobile-menu-overlay__inner { background: #0d1f35 !important; }

.offcanvas-navigation ul li a {
  color: #cbd5e1 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  border-bottom-color: rgba(255,255,255,0.07) !important;
}
.offcanvas-navigation ul li a:hover,
.offcanvas-navigation ul li.active > a { color: var(--tw-accent) !important; }
.offcanvas-navigation ul li.has-children > a::after { color: #94a3b8 !important; }

/* =========================================
   19. BREADCRUMB (SERVICE PAGES)
   ========================================= */
.breadcrumb-area {
  background-image: none !important;
  background: linear-gradient(135deg, #0a1628 0%, #0f2444 50%, #1e3a5f 100%) !important;
  padding-top: 80px !important;
  padding-bottom: 80px !important;
  position: relative;
  overflow: hidden;
}
.breadcrumb-area::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 80% 30%, rgba(249,115,22,0.12) 0%, transparent 60%);
  pointer-events: none;
}

.breadcrumb-area .breadcrumb-title {
  color: #ffffff !important;
  font-size: 38px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  position: relative;
}
.breadcrumb-area .breadcrumb-list li,
.breadcrumb-area .breadcrumb-list li a { color: rgba(203,213,225,0.8) !important; }
.breadcrumb-area .breadcrumb-list li a:hover { color: var(--tw-accent) !important; }
.breadcrumb-area .breadcrumb-list .breadcrumb-item.active { color: rgba(255,255,255,0.5) !important; }
.breadcrumb-area .breadcrumb-list li::after { color: rgba(255,255,255,0.25) !important; }

/* =========================================
   20. SERVICE PAGE UTILITIES
   ========================================= */
.check-list i       { color: var(--tw-accent)   !important; }
.cta-icon           { background: var(--tw-accent)   !important; }
.icon-circle        { background: var(--tw-primary) !important; }
.tech-category h4   { color: var(--tw-primary)   !important; }
.featured-delivery  { color: var(--tw-accent)    !important; }
.pricing-table--popular .featured-delivery { color: #fff !important; }

.benefit-icon i,
.benefit-icon .fa   { color: var(--tw-accent)    !important; }

.btn-link:not(.collapsed) i { color: var(--tw-accent) !important; }

/* Section heading colours */
.section-title-wrap .heading,
.gradation-title-wrap .heading,
.section-title-wrapper .heading { color: var(--tw-text-heading) !important; }

.section-subtitle {
  color: var(--tw-text-body) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

/* =========================================
   21. TECH STACK STRIP
   ========================================= */
.tech-strip-section {
  padding: 48px 0;
  border-top: 1px solid var(--tw-border);
  border-bottom: 1px solid var(--tw-border);
}

.tech-strip-label {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tw-text-muted);
  margin-bottom: 32px;
}

.tech-logos-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.tech-logo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 22px;
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius);
  background: var(--tw-bg-page);
  min-width: 100px;
  transition: all 0.22s ease;
  cursor: default;
}

.tech-logo-item:hover {
  border-color: var(--tw-accent);
  box-shadow: 0 4px 16px var(--tw-accent-ring);
  transform: translateY(-3px);
}

.tech-logo-item i {
  font-size: 28px;
  color: var(--tw-primary);
  transition: color 0.22s ease;
  line-height: 1;
}

.tech-logo-item:hover i {
  color: var(--tw-accent);
}

.tech-logo-item span {
  font-size: 12px;
  font-weight: 600;
  color: var(--tw-text-body);
  white-space: nowrap;
}

@media (max-width: 575px) {
  .tech-logos-grid { gap: 8px; }
  .tech-logo-item { min-width: 80px; padding: 14px 16px; }
  .tech-logo-item i { font-size: 22px; }
}

/* =========================================
   22. FAQ SECTION
   ========================================= */
.tw-faq-section { background: var(--tw-bg-page); }

.tw-faq-cta-text {
  color: var(--tw-text-body);
  font-size: 16px;
}

.tw-faq-accordion { display: flex; flex-direction: column; gap: 10px; }

.tw-faq-item {
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius) !important;
  overflow: hidden;
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.tw-faq-item:has(.tw-faq-question:not(.collapsed)) {
  border-color: rgba(249,115,22,0.35);
  box-shadow: 0 4px 20px rgba(249,115,22,0.08);
}

.tw-faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 24px !important;
  background: var(--tw-bg-page) !important;
  border: none !important;
  color: var(--tw-text-heading) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  line-height: 1.4 !important;
  height: auto !important;
  letter-spacing: 0 !important;
}

.tw-faq-question:hover {
  background: var(--tw-bg-subtle) !important;
  transform: none !important;
  box-shadow: none !important;
}

.tw-faq-question:not(.collapsed) {
  background: var(--tw-accent-light) !important;
  color: var(--tw-primary) !important;
}

.tw-faq-icon {
  font-size: 14px !important;
  color: var(--tw-accent);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.tw-faq-question:not(.collapsed) .tw-faq-icon {
  transform: rotate(45deg);
  color: var(--tw-accent);
}

.tw-faq-answer {
  padding: 0 24px 20px 24px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--tw-text-body);
  background: var(--tw-accent-light);
  border-top: 1px solid rgba(249,115,22,0.12);
}

.tw-faq-answer strong { color: var(--tw-primary); }

/* =========================================
   23. RESPONSIVE
   ========================================= */
@media (max-width: 991px) {
  .contact-form-service-wrap { padding: 30px 22px !important; }
}
@media (max-width: 767px) {
  .service-hero-btn { flex-direction: column; align-items: center; }
  .service-hero-btn .ht-btn { width: 100%; max-width: 290px; text-align: center; }
  .header-nav-cta { display: none; }
}