/* ============================================================
   GTA Premium Color System
   ============================================================ */
html, body { overflow-x: hidden; }

/* Global text justification */
p, .content, .xb-item--content, .about-text, .vm-text, .value-text, .xb-content,
.xb-item--text, .partner-slider-text, .services-slider-content p,
.sidebar-item-left .xb-content, .empanel-list li, .offer-list li,
.blog-post-content p, .sidebar-newsletter-from input,
.xb-blog-content p, .solution-description p, .arch-step-desc,
.process-step-desc, .service-row-text p, .service-accordion .accordion-body p {
  text-align: justify;
}

.original .logo img {
  width: 180px;
  height: 80px;
}
.xb-logo-mobile img {
  width: 180px;
  height: 80px;
}

:root {
  --gta-primary: #5E2A6E;
  --gta-primary-dark: #3B1D4F;
  --gta-primary-medium: #74438A;
  --gta-primary-light: #A078C5;
  --gta-gold: #D4AF37;
  --gta-gold-light: #E5C76B;
  --gta-white: #FFFFFF;
  --gta-off-white: #F8F9FC;
  --gta-bg-light: #F4F5F8;
  --gta-heading: #222222;
  --gta-body: #666666;
  --gta-border: #E7E7E7;
  --gta-divider: #ECECEC;
  --gta-shadow: 0 20px 50px rgba(0,0,0,0.08);
  --gta-shadow-hover: 0 25px 60px rgba(94,42,110,0.15);
}

/* Gradient utilities */
.gta-gradient {
  background: linear-gradient(135deg, #3B1D4F 0%, #5E2A6E 35%, #74438A 70%, #A078C5 100%);
}

/* Active nav gold underline */
.current-menu-item > a::after,
.current_page_item > a::after {
  background: #D4AF37 !important;
}

/* Gold accent for CTA highlights */
.gta-gold-accent {
  color: #D4AF37;
}

/* Purple image overlay */
/*.gta-overlay {*/
/*  background: rgba(94,42,110,0.12);*/
/*}*/

/* Form focus styles */
input:focus, select:focus, textarea:focus {
  border-color: #5E2A6E !important;
  box-shadow: 0 0 0 4px rgba(94,42,110,0.18) !important;
}

/* Scrollbar */
::-webkit-scrollbar-thumb {
  background: #5E2A6E !important;
}
::-webkit-scrollbar-track {
  background: #F4F5F8 !important;
}

/* Transparent header nav links */
.header-style .main-menu > ul > li > a > span {
  color: #fff;
  background: transparent;
}
/* Sticky scrolled header - dark text on light bg */
#xb-header-area .xb-header-area-sticky.xb-header-fixed .main-menu > ul > li > a > span {
  color: var(--gta-heading);
  background: transparent;
}
#xb-header-area .xb-header-area-sticky.xb-header-fixed {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}
.header-style .header-menu a {
  background: var(--gta-primary);
}
.header-style .header-menu a svg path {
  stroke: #fff;
}
#xb-header-area .xb-header-area-sticky.xb-header-fixed .header-menu a {
  background: var(--gta-primary);
}
#xb-header-area .xb-header-area-sticky.xb-header-fixed .header-menu a svg path {
  stroke: #fff;
}
#xb-header-area .xb-header-area-sticky.xb-header-fixed .xb-nav-mobile {
  color: var(--gta-heading) !important;
}
.main-menu > ul > li > a:hover {
  color: #5E2A6E !important;
}

/* Mobile sidebar menu - white text on dark bg */
.xb-header-menu-scroll .xb-menu-primary li a {
  color: rgba(255,255,255,0.85);
}
.xb-header-menu-scroll .xb-menu-primary li > a:hover {
  color: var(--gta-gold);
}
.xb-menu-toggle {
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.08);
}
.xb-header-mobile-search .search-field {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.15);
}
.xb-header-mobile-search .search-field::placeholder {
  color: rgba(255,255,255,0.4);
}
.xb-header-mobile-search .search-submit {
  color: rgba(255,255,255,0.6);
}
.xb-menu-close::before,
.xb-menu-close::after {
  background: rgba(255,255,255,0.7);
}
.xb-header-menu-scroll .xb-close::before,
.xb-header-menu-scroll .xb-close::after {
  background: rgba(255,255,255,0.7);
}
.xb-nav-mobile {
  color: #fff !important;
}

/* Card hover shadow */
.card-premium:hover,
.xb-service-item:hover,
.xb-team-item:hover {
  box-shadow: 0 25px 60px rgba(94,42,110,0.15) !important;
}

/* ============================================================
   Blog Single Post
   ============================================================ */
.xb-blog-single {
  background: #fff;
  border-radius: 16px;
  padding: 48px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

.xb-blog-featured-img {
  border-radius: 12px;
  overflow: hidden;
}

.xb-blog-featured-img img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

.xb-blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
  font-size: 15px;
  color: #888;
}

.xb-blog-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.xb-blog-meta i {
  color: var(--gta-gold);
  font-size: 14px;
}

.xb-blog-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--gta-heading);
  line-height: 1.3;
  margin-bottom: 32px;
}

/* Blog content typography */
.xb-blog-content {
  font-size: 17px;
  line-height: 1.8;
  color: var(--gta-body);
}

.xb-blog-content p {
  margin-bottom: 24px;
}

.xb-blog-content h2 {
  font-size: 26px;
  font-weight: 700;
  color: var(--gta-heading);
  margin-top: 40px;
  margin-bottom: 16px;
}

.xb-blog-content h3 {
  font-size: 22px;
  font-weight: 600;
  color: var(--gta-heading);
  margin-top: 32px;
  margin-bottom: 12px;
}

.xb-blog-content h4 {
  font-size: 19px;
  font-weight: 600;
  color: var(--gta-heading);
  margin-top: 28px;
  margin-bottom: 10px;
}

.xb-blog-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 32px auto;
  display: block;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.xb-blog-content blockquote {
  border-left: 4px solid var(--gta-gold);
  background: var(--gta-bg-light);
  padding: 24px 28px;
  margin: 32px 0;
  border-radius: 0 12px 12px 0;
  font-size: 18px;
  font-style: italic;
  line-height: 1.7;
  color: var(--gta-heading);
}

.xb-blog-content blockquote p {
  margin-bottom: 0;
}

.xb-blog-content ul,
.xb-blog-content ol {
  margin-bottom: 24px;
  padding-left: 24px;
}

.xb-blog-content li {
  margin-bottom: 8px;
}

.xb-blog-content a {
  color: var(--gta-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.xb-blog-content a:hover {
  color: var(--gta-gold);
}

.xb-blog-content .xb-align-left {
  margin-left: 0;
  margin-right: auto;
}

.xb-blog-content .xb-align-right {
  margin-left: auto;
  margin-right: 0;
}

.xb-blog-content .xb-align-center {
  margin-left: auto;
  margin-right: auto;
}

/* Sidebar */
.xb-blog-sidebar {
  position: sticky;
  top: 120px;
}

.xb-sidebar-widget {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

.xb-sidebar-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--gta-heading);
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--gta-gold);
}

.xb-recent-posts li {
  padding: 12px 0;
  border-bottom: 1px solid var(--gta-divider);
}

.xb-recent-posts li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.xb-recent-posts a {
  display: flex;
  gap: 16px;
  text-decoration: none;
  align-items: flex-start;
}

.xb-recent-img {
  width: 72px;
  min-width: 72px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
}

.xb-recent-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.xb-recent-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.xb-recent-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--gta-heading);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.xb-recent-title:hover {
  color: var(--gta-primary);
}

.xb-recent-date {
  font-size: 13px;
  color: #999;
}

@media (max-width: 991px) {
  .xb-blog-single {
    padding: 28px;
  }

  .xb-blog-title {
    font-size: 26px;
  }

  .xb-blog-sidebar {
    margin-top: 40px;
    position: static;
  }
}

@media (max-width: 575px) {
  .xb-blog-single {
    padding: 20px;
  }

  .xb-blog-title {
    font-size: 22px;
  }

  .xb-blog-meta {
    gap: 12px;
    font-size: 14px;
  }

  .xb-blog-content {
    font-size: 16px;
  }
}

.xb-blog-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--gta-divider);
}

.xb-tag {
  display: inline-block;
  background: var(--gta-bg-light);
  color: var(--gta-body);
  font-size: 13px;
  padding: 5px 14px;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.3s;
}

.xb-tag:hover {
  background: var(--gta-primary);
  color: #fff;
}

/* ============================================================
   HERO SECTION - Full viewport background slider
   ============================================================ */

/* === Hero wrapper === */
.hero-style-two {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}
.hero-style-two::before { display: none !important; }

/* === Swiper - fills hero completely === */
.hero-slider {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.hero-slider .swiper-wrapper,
.hero-slider .swiper-slide {
  width: 100%;
  height: 100%;
}

/* === Each slide === */
.hero-slide {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* === Background video === */
.hero-slide-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.hero-slide-bg-video .hero-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* === Background image fallback === */
.hero-slide-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* === Overlay above video/image === */
/*.hero-slide-overlay {*/
/*  position: absolute;*/
/*  inset: 0;*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  z-index: 2;*/
/*  background: linear-gradient(135deg, rgba(25,10,40,0.65) 0%, rgba(59,29,79,0.45) 50%, rgba(20,8,35,0.7) 100%);*/
/*}*/

/* === Content overlay - above swiper + overlay === */
.hero-content-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  pointer-events: none;
}

/* === Content inner - constrains text width, left-aligned === */
.hero-content-inner {
  width: 100%;
  max-width: 650px;
  padding-left: 8%;
  padding-right: 20px;
  pointer-events: auto;
}

/* Override main.css dm-hero_content (padding-top: 110px) */
.hero-content-wrap .dm-hero_content {
  padding-top: 0;
  margin-left: 0;
}

/* === Heading === */
.hero-content-wrap .dm-hero_content .title {
  font-size: 60px;
  color: #fff;
  line-height: 1.15;
  margin: 0 0 12px 0;
}

/* === Subtitle row === */
.hero-content-wrap .xb-item--holder {
  margin: 0 0 28px 0;
  padding: 0;
}
.hero-content-wrap .xb-item--holder .subtitle {
  font-size: 20px;
  color: rgba(255,255,255,0.8);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}

/* === Buttons footer === */
.hero-content-wrap .xb-item--footer {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  align-items: center;
  margin: 0;
  padding: 0;
}

@media (max-width: 1199px) {
  .hero-content-wrap .dm-hero_content .title { font-size: 48px; }
}
@media (max-width: 991px) {
  .hero-content-inner {
    max-width: 520px;
    padding-left: 5%;
  }
  .hero-content-wrap .dm-hero_content .title { font-size: 42px; }
}
@media (max-width: 767px) {
  .hero-content-inner {
    max-width: 100%;
    padding-left: 24px;
    padding-right: 24px;
  }
  .hero-content-wrap .dm-hero_content .title { font-size: 32px; }
  .hero-content-wrap .xb-item--holder .subtitle { font-size: 16px; }
}
@media (max-width: 575px) {
  .hero-content-wrap .dm-hero_content .title { font-size: 28px; }
}

/* === Pagination dots === */
.hero-slider-pagination {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 10px;
}
.hero-slider-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: rgba(255,255,255,0.4);
  border-radius: 50%;
  opacity: 1;
  cursor: pointer;
  transition: all 0.3s;
}
.hero-slider-pagination .swiper-pagination-bullet-active {
  background: var(--gta-gold);
  transform: scale(1.3);
}

/* === Prev/Next arrows === */
.hero-slider-prev,
.hero-slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 52px;
  height: 52px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s;
  backdrop-filter: blur(4px);
}
.hero-slider-prev:hover,
.hero-slider-next:hover {
  background: var(--gta-gold);
  border-color: var(--gta-gold);
}
.hero-slider-prev { left: 30px; }
.hero-slider-next { right: 30px; }

@media (max-width: 767px) {
  .hero-slider-prev,
  .hero-slider-next { display: none; }
}

/* === Scroll down indicator === */
.down-arrow { z-index: 20; }

/* ============================================================
   HERO PREMIUM SLIDER
   ============================================================ */
.hero-premium {
  position: relative;
  overflow: hidden;
}

.hero-premium-slider {
  position: relative;
  width: 100%;
  height: 100vh;
}

.hero-premium-slide {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.hero-premium-media {
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  z-index: 1;
}

.hero-premium-video,
.hero-premium-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hero-premium-video {
  object-fit: cover;
}

.hero-premium-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-premium-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(25,10,40,0.7) 0%, rgba(94,42,110,0.5) 100%);
  z-index: 2;
}

.hero-premium-content {
  position: relative;
  z-index: 3;
  width: 40%;
  display: flex;
  align-items: center;
  padding: 120px 60px 80px;
  background: #0f0714;
}

.hero-premium-content-inner {
  max-width: 520px;
}

.hero-premium-badge {
  display: inline-block;
  background: rgba(212,175,55,0.15);
  color: var(--gta-gold);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 8px 20px;
  border-radius: 30px;
  border: 1px solid rgba(212,175,55,0.3);
  margin-bottom: 28px;
}

.hero-premium-title {
  font-size: 54px;
  font-weight: 700;
  color: var(--gta-white);
  line-height: 1.15;
  margin-bottom: 24px;
}

.hero-premium-desc {
  font-size: 17px;
  line-height: 1.8;
  color: rgba(255,255,255,0.7);
  margin-bottom: 36px;
}

.hero-premium-actions {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.hero-premium-link {
  color: rgba(255,255,255,0.8);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-premium-link:hover {
  color: var(--gta-gold);
}

/* Glass Stat Cards */
.hero-premium-cards {
  position: absolute;
  bottom: 100px;
  left: 30px;
  right: 30px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.glass-card {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 18px 20px;
  text-align: center;
  transition: all 0.4s;
}

.glass-card:hover {
  background: rgba(255,255,255,0.14);
  transform: translateY(-4px);
  border-color: rgba(212,175,55,0.3);
}

.glass-card-icon {
  display: block;
  font-size: 22px;
  color: var(--gta-gold);
  margin-bottom: 6px;
}

.glass-card-value {
  display: block;
  font-size: 26px;
  font-weight: 700;
  color: var(--gta-white);
  line-height: 1.2;
}

.glass-card-label {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Bottom controls */
.hero-premium-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 50px;
  background: linear-gradient(transparent, rgba(15,7,20,0.8));
}

.hero-premium-counter {
  font-size: 16px;
  color: rgba(255,255,255,0.6);
  font-weight: 500;
  letter-spacing: 2px;
}

.hero-premium-counter .hero-current-slide {
  color: var(--gta-gold);
  font-size: 24px;
  font-weight: 700;
}

.hero-premium-nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero-premium-pagination {
  display: flex;
  gap: 8px;
}

.hero-premium-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: rgba(255,255,255,0.4);
  border-radius: 50%;
  opacity: 1;
  cursor: pointer;
  transition: all 0.3s;
}

.hero-premium-pagination .swiper-pagination-bullet-active {
  background: var(--gta-gold);
  width: 28px;
  border-radius: 4px;
}

.hero-premium-arrow {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.hero-premium-arrow:hover {
  background: var(--gta-gold);
  border-color: var(--gta-gold);
}

@media (max-width: 991px) {
  .hero-premium-slider,
  .hero-premium-slide { height: auto; min-height: 100vh; }
  .hero-premium-slide { flex-direction: column; }
  .hero-premium-media { position: relative; width: 100%; height: 50vh; order: -1; }
  .hero-premium-content { width: 100%; padding: 60px 30px; }
  .hero-premium-title { font-size: 36px; }
  .hero-premium-cards { position: relative; bottom: auto; left: auto; right: auto; padding: 20px; }
  .hero-premium-bottom { padding: 16px 24px; flex-wrap: wrap; gap: 12px; }
}

@media (max-width: 575px) {
  .hero-premium-title { font-size: 28px; }
  .hero-premium-content { padding: 40px 20px; }
  .hero-premium-cards { grid-template-columns: 1fr 1fr; gap: 8px; }
  .glass-card { padding: 14px; }
  .glass-card-value { font-size: 20px; }
  .hero-premium-actions { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ============================================================
   SERVICE DETAILS PAGE
   ============================================================ */
.service-hero {
  padding: 180px 0 100px;
  background: linear-gradient(135deg, #0f0714 0%, #1a0f2e 50%, #2d1550 100%);
}

.service-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(ellipse at 80% 20%, rgba(94,42,110,0.3) 0%, transparent 60%);
  z-index: -1;
}

.service-breadcrumb {
  background: none;
  padding: 0;
  margin-bottom: 20px;
}

.service-breadcrumb .breadcrumb-item { color: rgba(255,255,255,0.6); font-size: 14px; }
.service-breadcrumb .breadcrumb-item a { color: rgba(255,255,255,0.6); text-decoration: none; }
.service-breadcrumb .breadcrumb-item a:hover { color: var(--gta-gold); }
.service-breadcrumb .breadcrumb-item.active { color: var(--gta-gold); }
.service-breadcrumb .breadcrumb-item+.breadcrumb-item::before { color: rgba(255,255,255,0.3); }

.service-hero-title {
  font-size: 52px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
  line-height: 1.15;
}

.service-hero-desc {
  font-size: 18px;
  color: rgba(255,255,255,0.7);
  max-width: 600px;
  line-height: 1.7;
}

/* Service Main Layout */
.service-sidebar { position: sticky; top: 120px; }
.service-sidebar-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  margin-bottom: 28px;
}
.sidebar-card-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--gta-heading);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--gta-gold);
}
.sidebar-contact-list { list-style: none; padding: 0; margin: 0; }
.sidebar-contact-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--gta-divider);
  font-size: 14px;
  color: var(--gta-body);
}
.sidebar-contact-list li:last-child { border-bottom: none; }
.sidebar-contact-list li i { color: var(--gta-gold); font-size: 16px; width: 20px; text-align: center; }
.sidebar-services-list { list-style: none; padding: 0; margin: 0; }
.sidebar-services-list li { border-bottom: 1px solid var(--gta-divider); }
.sidebar-services-list li:last-child { border-bottom: none; }
.sidebar-services-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  color: var(--gta-body);
  text-decoration: none;
  font-size: 15px;
  transition: all 0.3s;
}
.sidebar-services-list a:hover { color: var(--gta-primary); padding-left: 6px; }
.sidebar-services-list a i { font-size: 12px; color: var(--gta-gold); }

.service-sidebar-download p { font-size: 14px; color: var(--gta-body); margin-bottom: 20px; line-height: 1.7; }

/* Service alternating rows */
.service-content { padding-right: 40px; }
.service-row {
  display: flex;
  align-items: center;
  gap: 36px;
  margin-bottom: 60px;
}
.service-row-alt { flex-direction: row-reverse; }
.service-row-img { flex: 0 0 45%; }
.service-row-img img { width: 100%; border-radius: 20px; }
.service-row-text { flex: 1; }
.service-row-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--gta-heading);
  margin-bottom: 16px;
}
.service-row-text p { font-size: 16px; line-height: 1.8; color: var(--gta-body); }

@media (max-width: 991px) {
  .service-hero { padding: 140px 0 60px; }
  .service-hero-title { font-size: 36px; }
  .service-content { padding-right: 0; }
  .service-row, .service-row-alt { flex-direction: column; gap: 24px; }
  .service-row-img { flex: none; width: 100%; }
  .service-sidebar { position: static; margin-top: 40px; }
}
@media (max-width: 575px) {
  .service-hero-title { font-size: 28px; }
}

/* Feature Cards */
.feature-card {
  background: #fff;
  border-radius: 16px;
  padding: 36px 28px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  transition: all 0.4s;
  height: 100%;
  text-align: center;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 60px rgba(94,42,110,0.15);
}
.feature-card-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--gta-primary) 0%, var(--gta-primary-light) 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 24px;
  color: var(--gta-white);
}
.feature-card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--gta-heading);
  margin-bottom: 12px;
}
.feature-card-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--gta-body);
  margin-bottom: 0;
}

/* Process Timeline */
.process-timeline { max-width: 800px; margin: 0 auto; position: relative; }
.process-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, var(--gta-primary-light), var(--gta-gold));
}
.process-step {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 50px;
  position: relative;
}
.process-step-right { flex-direction: row-reverse; }
.process-step-number {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  background: var(--gta-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--gta-white);
  z-index: 2;
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(94,42,110,0.3);
}
.process-step-content {
  flex: 1;
  background: #fff;
  border-radius: 16px;
  padding: 28px 32px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  margin-left: 60px;
}
.process-step-right .process-step-content { margin-left: 0; margin-right: 60px; }
.process-step-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--gta-gold), var(--gta-gold-light));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  margin-bottom: 16px;
}
.process-step-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--gta-heading);
  margin-bottom: 10px;
}
.process-step-desc { font-size: 14px; line-height: 1.7; color: var(--gta-body); margin-bottom: 0; }

@media (max-width: 767px) {
  .process-timeline::before { left: 22px; }
  .process-step, .process-step-right { flex-direction: column; gap: 16px; padding-left: 50px; }
  .process-step-number { left: 22px; transform: translateX(-50%); }
  .process-step-content, .process-step-right .process-step-content { margin: 0; }
}

/* FAQ Accordion */
.service-accordion .accordion-item {
  border: 1px solid var(--gta-border);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}
.service-accordion .accordion-button {
  font-size: 16px;
  font-weight: 600;
  color: var(--gta-heading);
  background: #fff;
  padding: 18px 24px;
  box-shadow: none;
}
.service-accordion .accordion-button:not(.collapsed) {
  background: var(--gta-bg-light);
  color: var(--gta-primary);
}
.service-accordion .accordion-button::after { background-size: 14px; }
.service-accordion .accordion-body { padding: 16px 24px 24px; }
.service-accordion .accordion-body p { font-size: 15px; line-height: 1.7; color: var(--gta-body); margin: 0; }

/* Service CTA */
.service-cta {
  background: linear-gradient(135deg, #0f0714 0%, #1a0f2e 50%, #2d1550 100%);
}
.service-cta-bg {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-image: radial-gradient(ellipse at 50% 50%, rgba(94,42,110,0.3) 0%, transparent 60%);
  z-index: -1;
}
.service-cta-subtitle {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--gta-gold);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 16px;
}
.service-cta-title {
  font-size: 42px;
  font-weight: 700;
  color: var(--gta-white);
  margin-bottom: 20px;
}
.service-cta-desc {
  font-size: 18px;
  color: rgba(255,255,255,0.7);
  max-width: 560px;
  margin: 0 auto 36px;
  line-height: 1.7;
}

@media (max-width: 575px) {
  .service-cta-title { font-size: 30px; }
}

/* ============================================================
   SOLUTION DETAILS PAGE
   ============================================================ */
.solution-hero {
  padding: 180px 0 100px;
  background: linear-gradient(135deg, #0a0a1a 0%, #162040 50%, #1a0f2e 100%);
}
.solution-hero-bg {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-image: radial-gradient(ellipse at 20% 30%, rgba(94,42,110,0.25) 0%, transparent 50%);
  z-index: -1;
}
.solution-breadcrumb { background: none; padding: 0; margin-bottom: 20px; }
.solution-breadcrumb .breadcrumb-item { color: rgba(255,255,255,0.6); font-size: 14px; }
.solution-breadcrumb .breadcrumb-item a { color: rgba(255,255,255,0.6); text-decoration: none; }
.solution-breadcrumb .breadcrumb-item a:hover { color: var(--gta-gold); }
.solution-breadcrumb .breadcrumb-item.active { color: var(--gta-gold); }
.solution-breadcrumb .breadcrumb-item+.breadcrumb-item::before { color: rgba(255,255,255,0.3); }

.solution-hero-badge {
  display: inline-block;
  background: rgba(212,175,55,0.15);
  color: var(--gta-gold);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 30px;
  border: 1px solid rgba(212,175,55,0.3);
  margin-bottom: 20px;
}
.solution-hero-title { font-size: 48px; font-weight: 700; color: #fff; margin-bottom: 20px; line-height: 1.15; }
.solution-hero-desc { font-size: 18px; color: rgba(255,255,255,0.7); max-width: 600px; line-height: 1.7; }

.solution-problem-icon { font-size: 48px; color: var(--gta-gold); margin-bottom: 16px; }
.solution-problem-list { list-style: none; padding: 0; margin: 0; }
.solution-problem-list li {
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--gta-body);
}
.solution-problem-list li i { color: #e74c3c; font-size: 16px; }
.solution-problem-img img { width: 100%; border-radius: 20px; }

.solution-metric {
  background: var(--gta-bg-light);
  border-radius: 12px;
  padding: 24px 16px;
  text-align: center;
}
.solution-metric-value {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: var(--gta-primary);
  line-height: 1.2;
}
.solution-metric-label {
  display: block;
  font-size: 13px;
  color: var(--gta-body);
  margin-top: 4px;
}

.architecture-flow {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.arch-step {
  flex: 1;
  min-width: 160px;
  max-width: 200px;
  background: #fff;
  border-radius: 16px;
  padding: 28px 20px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  position: relative;
}
.arch-step-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, var(--gta-primary) 0%, var(--gta-primary-light) 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 22px;
  color: #fff;
}
.arch-step-title { font-size: 16px; font-weight: 700; color: var(--gta-heading); margin-bottom: 8px; }
.arch-step-desc { font-size: 13px; line-height: 1.6; color: var(--gta-body); margin: 0; }
.arch-arrow {
  position: absolute;
  top: 50%;
  right: -16px;
  transform: translateY(-50%);
  color: var(--gta-gold);
  font-size: 18px;
  z-index: 2;
}

@media (max-width: 991px) {
  .architecture-flow { flex-direction: column; align-items: center; }
  .arch-step { max-width: 100%; width: 100%; }
  .arch-arrow { transform: rotate(90deg); right: auto; top: auto; bottom: -16px; left: 50%; margin-left: -8px; }
}

.gallery-item { position: relative; overflow: hidden; border-radius: 20px; }
.gallery-item img { width: 100%; display: block; }
.gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

.solution-benefits-list { list-style: none; padding: 0; margin: 0; }
.solution-benefits-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gta-divider);
  font-size: 15px;
  color: var(--gta-body);
  line-height: 1.6;
}
.solution-benefits-list li:last-child { border-bottom: none; }
.solution-benefits-list li i { color: var(--gta-gold); font-size: 18px; margin-top: 2px; }
.solution-benefits-list li strong { color: var(--gta-heading); }

.tech-stack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 700px;
  margin: 0 auto;
}
.tech-item {
  background: #fff;
  border-radius: 16px;
  padding: 28px 20px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  transition: all 0.4s;
}
.tech-item:hover { transform: translateY(-4px); box-shadow: 0 25px 60px rgba(94,42,110,0.15); }
.tech-item-icon { font-size: 32px; color: var(--gta-primary); margin-bottom: 12px; }
.tech-item-label { font-size: 14px; font-weight: 600; color: var(--gta-heading); }

@media (max-width: 575px) {
  .tech-stack-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Timeline */
.timeline { position: relative; max-width: 800px; margin: 0 auto; padding: 20px 0; }
.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, var(--gta-primary-light), var(--gta-gold));
}
.timeline-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 40px;
  position: relative;
}
.timeline-item-right { flex-direction: row-reverse; }
.timeline-marker {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  background: var(--gta-gold);
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 2;
  top: 28px;
}
.timeline-content {
  flex: 0 0 45%;
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  margin-left: 60px;
}
.timeline-item-right .timeline-content { margin-left: 0; margin-right: 60px; }
.timeline-phase {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--gta-gold);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.timeline-title { font-size: 18px; font-weight: 700; color: var(--gta-heading); margin-bottom: 8px; }
.timeline-desc { font-size: 14px; line-height: 1.6; color: var(--gta-body); margin: 0; }

@media (max-width: 767px) {
  .timeline::before { left: 24px; }
  .timeline-item, .timeline-item-right { flex-direction: column; padding-left: 50px; }
  .timeline-marker { left: 24px; }
  .timeline-content, .timeline-item-right .timeline-content { margin: 0; flex: 1; }
}

.industry-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  transition: all 0.4s;
}
.industry-card:hover { transform: translateY(-4px); box-shadow: 0 25px 60px rgba(94,42,110,0.15); }
.industry-card-icon { font-size: 36px; color: var(--gta-primary); margin-bottom: 14px; }
.industry-card-name { font-size: 17px; font-weight: 600; color: var(--gta-heading); margin: 0; }

.related-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  transition: all 0.4s;
  height: 100%;
}
.related-card:hover { transform: translateY(-6px); box-shadow: 0 25px 60px rgba(94,42,110,0.15); }
.related-card img { width: 100%; height: 200px; object-fit: cover; }
.related-card-body { padding: 24px; }
.related-card-title { font-size: 18px; font-weight: 700; color: var(--gta-heading); margin-bottom: 10px; }
.related-card-text { font-size: 14px; line-height: 1.7; color: var(--gta-body); margin-bottom: 16px; }
.related-card-link {
  color: var(--gta-primary);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.related-card-link:hover { color: var(--gta-gold); }

.solution-cta {
  background: linear-gradient(135deg, #0a0a1a 0%, #162040 50%, #1a0f2e 100%);
}
.solution-cta-bg {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-image: radial-gradient(ellipse at 50% 50%, rgba(94,42,110,0.25) 0%, transparent 60%);
  z-index: -1;
}
.solution-cta-subtitle {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--gta-gold);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 16px;
}
.solution-cta-title { font-size: 42px; font-weight: 700; color: var(--gta-white); margin-bottom: 20px; }
.solution-cta-desc {
  font-size: 18px;
  color: rgba(255,255,255,0.7);
  max-width: 560px;
  margin: 0 auto 36px;
  line-height: 1.7;
}
@media (max-width: 575px) {
  .solution-hero-title { font-size: 32px; }
  .solution-cta-title { font-size: 30px; }
}

/* ============================================================
   BLOG POST DETAILS
   ============================================================ */
.reading-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--gta-gold), var(--gta-primary-light));
  z-index: 9999;
  transition: width 0.1s;
}

.blog-post-hero {
  padding: 180px 0 80px;
  background: #0f0714;
}

.blog-post-hero-bg {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-image: radial-gradient(ellipse at 50% 30%, rgba(94,42,110,0.2) 0%, transparent 60%);
  z-index: -1;
}

.blog-post-breadcrumb { background: none; padding: 0; margin-bottom: 16px; justify-content: center; }
.blog-post-breadcrumb .breadcrumb-item { color: rgba(255,255,255,0.5); font-size: 13px; }
.blog-post-breadcrumb .breadcrumb-item a { color: rgba(255,255,255,0.5); text-decoration: none; }
.blog-post-breadcrumb .breadcrumb-item a:hover { color: var(--gta-gold); }
.blog-post-breadcrumb .breadcrumb-item.active { color: var(--gta-gold); }
.blog-post-breadcrumb .breadcrumb-item+.breadcrumb-item::before { color: rgba(255,255,255,0.25); }

.blog-post-category {
  display: inline-block;
  background: rgba(212,175,55,0.12);
  color: var(--gta-gold);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 30px;
  border: 1px solid rgba(212,175,55,0.25);
  margin-bottom: 20px;
}

.blog-post-title {
  font-size: 48px;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 24px;
}

.blog-post-meta {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  color: rgba(255,255,255,0.6);
  font-size: 14px;
}

.blog-post-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.blog-post-meta i {
  color: var(--gta-gold);
  font-size: 14px;
}

.blog-post-featured-img {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.12);
}

.blog-post-featured-img img {
  width: 100%;
  max-height: 500px;
  object-fit: cover;
  display: block;
}

/* Content Layout */
.blog-post-share-col {
  position: absolute;
  left: -80px;
  top: 0;
  z-index: 5;
}

.blog-post-share {
  position: sticky;
  top: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: #fff;
  padding: 16px 12px;
  border-radius: 30px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.share-label {
  font-size: 10px;
  font-weight: 700;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.share-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gta-body);
  transition: all 0.3s;
  text-decoration: none;
  font-size: 16px;
}

.share-icon:hover {
  background: var(--gta-primary);
  color: #fff;
}

/* TOC Column */
.blog-post-toc-col {
  position: absolute;
  right: -80px;
  top: 0;
  z-index: 5;
}

.blog-post-toc {
  position: sticky;
  top: 140px;
  width: 220px;
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.toc-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--gta-heading);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--gta-gold);
}

.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc-link {
  display: block;
  padding: 7px 0;
  font-size: 13px;
  color: var(--gta-body);
  text-decoration: none;
  border-bottom: 1px solid var(--gta-divider);
  transition: all 0.3s;
}

.toc-link:last-child { border-bottom: none; }
.toc-link:hover,
.toc-link.active { color: var(--gta-primary); font-weight: 600; }

/* Article Content */
.blog-post-article {
  max-width: 850px;
  margin: 0 auto;
}

.blog-post-content {
  font-size: 17px;
  line-height: 1.9;
  color: var(--gta-body);
}

.blog-post-content p {
  margin-bottom: 24px;
}

.blog-post-callout {
  background: var(--gta-bg-light);
  border-left: 4px solid var(--gta-gold);
  border-radius: 0 16px 16px 0;
  padding: 28px 32px;
  margin: 36px 0;
  position: relative;
}

.callout-icon {
  position: absolute;
  top: 20px;
  left: 24px;
  font-size: 24px;
  color: var(--gta-gold);
  opacity: 0.3;
}

.blog-post-callout p {
  font-size: 18px;
  font-style: italic;
  color: var(--gta-heading);
  margin-bottom: 12px;
  padding-left: 36px;
}

.blog-post-callout cite {
  font-size: 14px;
  color: var(--gta-primary);
  font-style: normal;
  font-weight: 500;
  display: block;
  padding-left: 36px;
}

.blog-post-inline-image {
  margin: 40px 0;
}

.blog-post-inline-image img {
  width: 100%;
  border-radius: 20px;
  display: block;
}

.inline-image-caption {
  display: block;
  text-align: center;
  font-size: 13px;
  color: #999;
  margin-top: 12px;
  font-style: italic;
}

.blog-post-takeaways {
  background: linear-gradient(135deg, rgba(94,42,110,0.04), rgba(212,175,55,0.06));
  border: 1px solid rgba(94,42,110,0.15);
  border-radius: 16px;
  padding: 32px;
  margin: 40px 0;
}

.takeaways-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--gta-heading);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.takeaways-title i { color: var(--gta-gold); }

.takeaways-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.takeaways-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-size: 15px;
  color: var(--gta-body);
  line-height: 1.6;
}

.takeaways-list li i {
  color: var(--gta-primary);
  margin-top: 4px;
  font-size: 14px;
}

.blog-post-tags {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--gta-divider);
}

.tags-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--gta-heading);
}

.tag-link {
  display: inline-block;
  background: var(--gta-bg-light);
  color: var(--gta-body);
  font-size: 13px;
  padding: 6px 16px;
  border-radius: 20px;
  text-decoration: none;
  transition: all 0.3s;
}

.tag-link:hover {
  background: var(--gta-primary);
  color: #fff;
}

/* Author Card */
.blog-post-author-card {
  display: flex;
  gap: 24px;
  background: #fff;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  margin: 40px 0;
}

.author-card-avatar {
  flex: 0 0 80px;
}

.author-card-avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.author-card-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--gta-heading);
  margin-bottom: 2px;
}

.author-card-role {
  display: block;
  font-size: 13px;
  color: var(--gta-gold);
  font-weight: 500;
  margin-bottom: 12px;
}

.author-card-bio {
  font-size: 14px;
  line-height: 1.7;
  color: var(--gta-body);
  margin-bottom: 14px;
}

.author-card-social {
  display: flex;
  gap: 10px;
}

.author-card-social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gta-bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gta-body);
  text-decoration: none;
  transition: all 0.3s;
  font-size: 14px;
}

.author-card-social a:hover {
  background: var(--gta-primary);
  color: #fff;
}

/* Comments */
.blog-post-comments { margin-top: 40px; }

.comments-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--gta-heading);
  margin-bottom: 28px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--gta-gold);
}

.comment-input {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--gta-border);
  border-radius: 10px;
  font-size: 15px;
  color: var(--gta-heading);
  transition: all 0.3s;
}

.comment-input:focus {
  outline: none;
  border-color: var(--gta-primary);
  box-shadow: 0 0 0 4px rgba(94,42,110,0.1);
}

.comment-textarea { min-height: 140px; resize: vertical; }

/* Related Articles on Blog Post */
.related-article-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  transition: all 0.4s;
  height: 100%;
}
.related-article-card:hover { transform: translateY(-6px); box-shadow: 0 25px 60px rgba(94,42,110,0.15); }
.related-article-img { height: 200px; overflow: hidden; }
.related-article-img img { width: 100%; height: 100%; object-fit: cover; }
.related-article-body { padding: 24px; }
.related-article-cat {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--gta-gold);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.related-article-title { font-size: 17px; font-weight: 700; line-height: 1.4; margin-bottom: 8px; }
.related-article-title a { color: var(--gta-heading); text-decoration: none; }
.related-article-title a:hover { color: var(--gta-primary); }
.related-article-date { font-size: 13px; color: #999; }

/* Newsletter Section */
.blog-post-newsletter {
  background: linear-gradient(135deg, #0f0714 0%, #1a0f2e 50%, #2d1550 100%);
}
.blog-post-newsletter-bg {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-image: radial-gradient(ellipse at 50% 50%, rgba(94,42,110,0.3) 0%, transparent 60%);
  z-index: -1;
}
.newsletter-subtitle {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--gta-gold);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 16px;
}
.newsletter-title { font-size: 38px; font-weight: 700; color: var(--gta-white); margin-bottom: 16px; }
.newsletter-desc { font-size: 17px; color: rgba(255,255,255,0.7); max-width: 500px; margin: 0 auto 32px; line-height: 1.7; }
.newsletter-input-group {
  display: flex;
  max-width: 520px;
  margin: 0 auto;
  gap: 0;
}
.newsletter-input {
  flex: 1;
  padding: 16px 20px;
  border: 1px solid rgba(255,255,255,0.15);
  border-right: none;
  border-radius: 10px 0 0 10px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 15px;
  outline: none;
}
.newsletter-input::placeholder { color: rgba(255,255,255,0.4); }
.newsletter-input:focus { border-color: var(--gta-gold); }
.newsletter-btn { border-radius: 0 10px 10px 0; white-space: nowrap; }

@media (max-width: 575px) {
  .newsletter-input-group { flex-direction: column; gap: 12px; }
  .newsletter-input { border-radius: 10px; border-right: 1px solid rgba(255,255,255,0.15); }
  .newsletter-btn { border-radius: 10px; }
}

/* TOC/Share responsive */
@media (max-width: 1400px) {
  .blog-post-share-col { position: relative; left: auto; top: auto; margin-bottom: 20px; }
  .blog-post-share { flex-direction: row; padding: 10px 20px; border-radius: 30px; }
  .blog-post-toc-col { position: relative; right: auto; top: auto; margin-top: 30px; }
  .blog-post-toc { position: static; width: 100%; }
}

/* ============================================================
   GLOBAL IMAGE STYLES
   ============================================================ */
.xb-img {
  border-radius: 20px !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08) !important;
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  display: block;
  max-width: 100%;
  height: auto;
}

.xb-img-hover {
  position: relative;
  overflow: hidden;
}

.xb-img-hover:hover {
  transform: scale(1.03);
  box-shadow: 0 20px 50px rgba(94,42,110,0.2) !important;
}

.xb-img-hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(94,42,110,0);
  transition: all 0.5s;
  pointer-events: none;
  border-radius: 20px;
}

.xb-img-hover:hover::after {
  background: rgba(94,42,110,0.08);
}

/* Container / section overrides for solutions */
.solution-overview-img img,
.solution-problem-img img { width: 100%; border-radius: 20px; }

/* Fix bg-light to use variable */
.bg-light { background-color: var(--gta-bg-light) !important; }

/* ============================================================
   ABOUT PAGE - Detailed Content
   ============================================================ */
.clr-gold { color: var(--gta-gold) !important; }

.about-detail {
  background: #fff;
}
.about-text {
  font-size: 17px;
  line-height: 1.9;
  color: var(--gta-body);
  margin-bottom: 20px;
}
.about-subheading {
  font-size: 24px;
  font-weight: 700;
  color: var(--gta-heading);
  margin-bottom: 18px;
}
.empanelment-box {
  background: var(--gta-bg-light);
  border-left: 4px solid var(--gta-gold);
  border-radius: 0 16px 16px 0;
  padding: 32px 36px;
}
.empanel-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--gta-heading);
  margin-bottom: 16px;
}
.empanel-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.empanel-list li {
  padding: 8px 0;
  font-size: 16px;
  color: var(--gta-body);
  display: flex;
  align-items: center;
  gap: 12px;
}
.empanel-list li i {
  color: var(--gta-gold);
  font-size: 18px;
}
.offer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.offer-list li {
  position: relative;
  padding: 10px 0 10px 28px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--gta-body);
}
.offer-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gta-gold);
}

/* Vision & Mission */
.vision-mission {
  position: relative;
}
.vm-card {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 48px 36px;
  text-align: center;
  transition: all 0.4s;
  height: 100%;
}
.vm-card:hover {
  background: rgba(255,255,255,0.14);
  transform: translateY(-6px);
  border-color: var(--gta-gold);
}
.vm-icon {
  width: 72px;
  height: 72px;
  background: rgba(212,175,55,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  font-size: 30px;
  color: var(--gta-gold);
}
.vm-title {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
}
.vm-text {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255,255,255,0.75);
}

/* Values */
.values-section {
  background: var(--gta-bg-light);
}
.value-card {
  background: #fff;
  border-radius: 16px;
  padding: 36px 28px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  transition: all 0.4s;
  height: 100%;
  text-align: center;
}
.value-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--gta-shadow-hover);
}
.value-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, var(--gta-primary) 0%, var(--gta-primary-light) 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 26px;
  color: #fff;
}
.value-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--gta-heading);
  margin-bottom: 12px;
}
.value-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--gta-body);
  margin: 0;
}

/* ============================================================
   ACTIVITIES PAGE
   ============================================================ */
.activities-hero {
  position: relative;
}
.max-600 { max-width: 600px; }

.activity-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  transition: all 0.4s;
  height: 100%;
}
.activity-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--gta-shadow-hover);
}

.activity-slider {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
}
.activity-slider .swiper-slide {
  width: 100%;
  height: 100%;
}
.activity-slider .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.activity-slider-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  z-index: 5;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  padding: 0 10px;
}
.activity-slider-prev,
.activity-slider-next {
  pointer-events: auto;
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.85);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--gta-heading);
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.activity-slider-prev:hover,
.activity-slider-next:hover {
  background: var(--gta-gold);
  color: #fff;
}

.activity-card-img-placeholder {
  width: 100%;
  height: 220px;
  background: var(--gta-bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: #ccc;
}

.activity-card-body {
  padding: 24px 24px 28px;
}
.activity-card-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--gta-heading);
  margin-bottom: 10px;
}
.activity-card-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--gta-body);
  margin: 0;
}

/* ============================================================
   CAREERS PAGE
   ============================================================ */
.careers-hero {
  position: relative;
}

.career-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px 36px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  margin-bottom: 20px;
  transition: all 0.3s;
}
.career-card:hover {
  box-shadow: 0 8px 40px rgba(94,42,110,0.1);
}
.career-card.career-closed {
  opacity: 0.65;
}

.career-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
.career-card-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--gta-heading);
  margin-bottom: 8px;
}
.career-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 14px;
  color: var(--gta-body);
}
.career-card-meta i {
  color: var(--gta-gold);
  margin-right: 5px;
}
.career-status-badge {
  font-size: 13px;
  font-weight: 600;
}
.career-status-badge.open { color: #28a745; }
.career-status-badge.closed { color: #6c757d; }

.career-card-desc {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--gta-body);
}

.career-card-action { flex-shrink: 0; }
.disabled-btn {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

@media (max-width: 767px) {
  .career-card-header { flex-direction: column; }
  .career-card { padding: 24px; }
}

/* Career Apply Page */
.career-apply-hero {
  position: relative;
}

.apply-form-card {
  background: #fff;
  border-radius: 16px;
  padding: 36px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
.apply-form-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--gta-heading);
  margin-bottom: 24px;
}
.apply-input {
  border-radius: 8px;
  border-color: var(--gta-border);
  padding: 10px 14px;
  font-size: 15px;
}
.apply-input:focus {
  border-color: var(--gta-primary);
  box-shadow: 0 0 0 4px rgba(94,42,110,0.1);
}

.career-sidebar-card {
  background: #fff;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  margin-bottom: 20px;
}
.career-sidebar-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--gta-heading);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--gta-gold);
}
.career-sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.career-sidebar-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  font-size: 15px;
  color: var(--gta-body);
  border-bottom: 1px solid var(--gta-divider);
}
.career-sidebar-list li:last-child { border-bottom: none; }
.career-sidebar-list li i { color: var(--gta-gold); width: 18px; text-align: center; }
.career-sidebar-html {
  font-size: 15px;
  line-height: 1.7;
  color: var(--gta-body);
}

/* Success / Closed states */
.apply-success,
.apply-closed {
  text-align: center;
  padding: 60px 30px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
.apply-success-icon { font-size: 64px; color: #28a745; margin-bottom: 20px; }
.apply-closed-icon { font-size: 64px; color: #6c757d; margin-bottom: 20px; }
.apply-success-title,
.apply-closed-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--gta-heading);
  margin-bottom: 12px;
}
.apply-success-text,
.apply-closed-text {
  font-size: 16px;
  color: var(--gta-body);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ============================================================
   Partner Slider (Index page)
   ============================================================ */
.team-slider-section {
  background: #f8f6fb;
}
.partner-slider-wrap {
  position: relative;
}
.partner-slider .swiper-slide {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 30px rgba(0,0,0,0.06);
}
.partner-slide-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.partner-slider-img {
  height: 0;
  padding-bottom: 75%;
  background: #e9e0f0;
  position: relative;
}
.partner-slider-img img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
.partner-slider-content {
  padding: 50px 40px;
}
.partner-slider-label {
  display: inline-block;
  background: var(--gta-gradient, linear-gradient(135deg, var(--gta-primary) 0%, var(--gta-gold) 100%));
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 16px;
}
.partner-slider-name {
  font-size: 32px;
  font-weight: 700;
  color: var(--gta-heading);
  margin-bottom: 8px;
}
.partner-slider-desig {
  display: block;
  font-size: 16px;
  color: var(--gta-primary);
  font-weight: 500;
  margin-bottom: 4px;
}
.partner-slider-qual {
  display: block;
  font-size: 14px;
  color: var(--gta-gold);
  font-weight: 600;
  margin-bottom: 10px;
}
.partner-slider-bio {
  font-size: 15px;
  line-height: 1.7;
  color: var(--gta-body);
  margin-top: 14px;
}
.partner-slider-text {
  font-size: 14px;
  color: var(--gta-primary);
  font-weight: 600;
  margin-top: 20px;
}
.partner-slider-text i {
  margin-left: 6px;
  font-size: 12px;
}
.partner-slider-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}
.partner-slider-prev,
.partner-slider-next {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #e0d6e8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .3s;
  font-size: 16px;
  color: var(--gta-primary);
}
.partner-slider-prev:hover,
.partner-slider-next:hover {
  background: var(--gta-primary);
  border-color: var(--gta-primary);
  color: #fff;
}

/* ============================================================
   Partner Detail Page
   ============================================================ */
.partner-detail-img-wrap {
  background: #f4f0f7;
  border-radius: 16px;
  overflow: hidden;
  position: sticky;
  top: 100px;
}
.partner-detail-img {
  width: 100%;
  height: 460px;
  object-fit: contain;
  object-position: center bottom;
  display: block;
}
.partner-detail-meta {
  padding: 30px;
  background: #fff;
}
.partner-detail-name {
  font-size: 28px;
  font-weight: 700;
  color: var(--gta-heading);
  margin-bottom: 4px;
}
.partner-detail-desig {
  display: block;
  font-size: 16px;
  color: var(--gta-primary);
  font-weight: 500;
  margin-bottom: 4px;
}
.partner-detail-qual {
  display: block;
  font-size: 14px;
  color: var(--gta-gold);
  font-weight: 600;
  margin-bottom: 8px;
}
.partner-detail-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gta-primary);
  font-weight: 600;
  text-decoration: none;
  margin-top: 6px;
}
.partner-detail-linkedin:hover { color: var(--gta-gold); }
.partner-detail-bio {
  font-size: 16px;
  line-height: 1.8;
  color: var(--gta-body);
}
.partner-detail-section-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--gta-heading);
  margin-bottom: 18px;
}
.partner-expertise-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.partner-expertise-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: var(--gta-body);
  padding: 8px 0;
  line-height: 1.6;
}
.partner-expertise-list li i {
  color: var(--gta-gold);
  font-size: 18px;
}

@media (max-width: 991px) {
  .partner-slider-content { padding: 30px 24px; }
  .partner-slider-name { font-size: 24px; }
  .partner-detail-img-wrap { position: static; }
  .partner-detail-img { height: 340px; }
}
@media (max-width: 575px) {
  .partner-slider-content { padding: 20px; }
  .partner-slider-name { font-size: 20px; }
}



/* ============================================================
   Team Page Grid
   ============================================================ */
.team-page-grid {
  background: #f8f6fb;
}
.team-page-card {
  display: block;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 4px 24px rgba(0,0,0,0.05);
  transition: all .3s;
}
.team-page-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}
.team-page-card-img {
  height: 300px;
  background: #e9e0f0;
  position: relative;
}
.team-page-card-img img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
.team-page-card-body {
  padding: 24px 28px;
  text-align: center;
}
.team-page-card-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--gta-heading);
  margin-bottom: 4px;
}
.team-page-card-desig {
  display: block;
  font-size: 15px;
  color: var(--gta-primary);
  font-weight: 500;
  margin-bottom: 4px;
}
.team-page-card-qual {
  display: block;
  font-size: 13px;
  color: var(--gta-gold);
  font-weight: 600;
}
.team-page-card-linkedin {
  margin-top: 12px;
  color: var(--gta-primary);
  font-size: 18px;
}
.team-page-card-bio {
  font-size: 14px;
  line-height: 1.6;
  color: var(--gta-body);
  margin-top: 12px;
  margin-bottom: 0;
}

/* ============================================================
   Services Slider (Index page)
   ============================================================ */
.services-slider-section {
  background: #f8f6fb;
}
.services-slider-wrap {
  position: relative;
}
.services-slider .swiper-slide {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 30px rgba(0,0,0,0.06);
}
.services-slider-img {
  height: 0;
  padding-bottom: 66%;
  background: #e9e0f0;
  position: relative;
}
.services-slider-img img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.services-slider-content {
  padding: 50px 50px 50px 40px;
}
.services-slider-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--gta-heading);
  margin-bottom: 20px;
}
.services-slider-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.services-slider-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: var(--gta-body);
  padding: 6px 0;
  line-height: 1.6;
}
.services-slider-list li i {
  color: var(--gta-gold);
  font-size: 18px;
}
.services-slider-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}
.services-slider-prev,
.services-slider-next {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #e0d6e8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .3s;
  font-size: 16px;
  color: var(--gta-primary);
}
.services-slider-prev:hover,
.services-slider-next:hover {
  background: var(--gta-primary);
  border-color: var(--gta-primary);
  color: #fff;
}
.services-slider-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.services-slider-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #d0c8d8;
  opacity: 1;
}
.services-slider-pagination .swiper-pagination-bullet-active {
  background: var(--gta-primary);
}

@media (max-width: 991px) {
  .services-slider-content { padding: 30px 24px; }
  .services-slider-title { font-size: 22px; }
  .services-slider-img { padding-bottom: 50%; }
}
@media (max-width: 575px) {
  .services-slider-content { padding: 20px; }
  .services-slider-title { font-size: 20px; }
}

/* Tool logo cards */
.tool-logo-card {
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tool-logo-card img {
  width: 100%;
  max-width: 110px;
  height: 45px;
  object-fit: contain;
}

/* Menu dropdown arrow fix */
.main-menu ul li.menu-item-has-children > a span::after {
  font-weight: 900;
  color: #fff;
}
.xb-header-area-sticky.xb-header-fixed .main-menu ul li.menu-item-has-children > a span::after {
  color: var(--gta-heading);
}

/* Footer links - remove all backgrounds */
.footer a,
.footer a:hover,
.footer .xb-list li a,
.footer .xb-list li a:hover,
.footer .xb-social-media-item,
.footer .xb-social-media-item::before,
.footer .xb-social-media-item:hover::before {
  background: none ;
  background-color: transparent ;
}

/* ==== Service Details Page ==== */
.service-detail-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--gta-heading);
  margin-bottom: 20px;
}
.service-detail-body { max-width: 760px; }
.service-detail-text {
  font-size: 16px;
  line-height: 1.8;
  color: var(--gta-body);
}
.service-detail-img-wrap {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 30px rgba(0,0,0,0.08);
}
.service-detail-img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}
.service-detail-sidebar { position: sticky; top: 120px; }
.service-sidebar-box {
  background: #faf8fd;
  border: 1px solid #ece3f4;
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 24px;
}
.service-sidebar-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--gta-gold);
  margin-bottom: 10px;
}
.service-sidebar-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--gta-heading);
  margin-bottom: 18px;
}
.service-feature-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px dashed #e6dcf0;
  font-size: 16px;
  color: var(--gta-body);
  line-height: 1.5;
}
.service-feature-list li:last-child { border-bottom: none; }
.service-feature-list li i {
  color: var(--gta-gold);
  font-size: 18px;
  flex-shrink: 0;
}
.service-sidebar-cta { background: var(--gta-primary); border-color: var(--gta-primary); }
.service-sidebar-cta .service-sidebar-label { color: var(--gta-gold); }
.service-sidebar-cta .service-sidebar-title { color: #fff; }
.service-sidebar-text { color: rgba(255,255,255,0.75); margin-bottom: 20px; font-size: 15px; line-height: 1.6; }
@media (max-width: 575px) {
  .service-detail-img { height: 280px; }
  .service-detail-title { font-size: 26px; }
}

/* ==========================================================================
   SITE FIXES — appended 2026-08-24
   Uses only existing theme variables (--gta-*, --color-*). No theme colours
   or layout structure altered. Each block is independent and can be deleted
   on its own. theme.css is the last stylesheet loaded on every page, so
   these override main.css without needing !important.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FIX 1 · Service slider images were being cropped
   Cause: .services-slider-img is a fixed-ratio box (height:0 + padding-bottom:66%)
   and the img inside used object-fit:cover, which fills the box and crops the
   overflow. `contain` fits the whole image instead. The existing #e9e0f0 panel
   colour shows in the letterbox area, so nothing new is introduced.
   -------------------------------------------------------------------------- */
.services-slider-img img {
  object-fit: contain;
  object-position: center;
}

/* --------------------------------------------------------------------------
   FIX 2 · Social media icons in their real brand colours
   The icon sits in .xb-item--icon, which is a SIBLING of the .xb-overlay link,
   not a child — so it can't be reached by a descendant selector from the href.
   :has() matches the parent card by the link it contains, then targets the icon.
   Overrides `.xb-social-media-item .xb-item--icon i { color: var(--color-white) }`.
   -------------------------------------------------------------------------- */
.xb-social-media-item:has(a[href*="facebook.com"]) .xb-item--icon i {
  color: #1877F2;
}
.xb-social-media-item:has(a[href*="linkedin.com"]) .xb-item--icon i {
  color: #0A66C2;
}
.xb-social-media-item:has(a[href*="youtube.com"]) .xb-item--icon i {
  color: #FF0000;
}

/* Instagram has no single flat brand colour. Solid pink is the fallback;
   the gradient is applied only where background-clip:text is supported,
   so the glyph can never end up invisible. */
.xb-social-media-item:has(a[href*="instagram.com"]) .xb-item--icon i {
  color: #E4405F;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .xb-social-media-item:has(a[href*="instagram.com"]) .xb-item--icon i {
    background: radial-gradient(circle at 30% 107%,
                #fdf497 0%, #fdf497 5%, #fd5949 45%,
                #d6249f 60%, #285AEB 90%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* X/Twitter's brand colour is black, which would be invisible on this dark
   footer, so its inline SVG stays white — matching X's own dark-mode mark. */
.xb-social-media-item:has(a[href*="x.com"]) .xb-item--icon svg path,
.xb-social-media-item:has(a[href*="twitter.com"]) .xb-item--icon svg path {
  fill: #FFFFFF;
}

/* Keep the brand colour legible while the purple gradient sweeps in on hover */
.xb-social-media-item:hover .xb-item--icon i {
  filter: brightness(1.25);
}

/* --------------------------------------------------------------------------
   FIX 3 · Footer links — remove the grey hover box and the hover shift
   Cause: main.css:13177 adds background rgba(255,255,255,.05) plus a 1px
   border and slides the link 10px on hover. Neutralised by making :hover
   identical to the resting state. No colour is declared — currentColor keeps
   whatever the footer already uses.
   -------------------------------------------------------------------------- */
.xb-footer_widget .xb-list li a:hover {
  background: transparent;
  border-color: transparent;
  transform: translateX(-10px);
  color: currentColor;
}

/* --------------------------------------------------------------------------
   FIX 5 · Contact page — map beside the form
   Sits in the existing left column, so the 7/5 Bootstrap grid is untouched.
   The map artwork is neon-on-black; mix-blend-mode:screen makes pure black
   mathematically transparent, letting the theme's own purple gradient show
   through instead of introducing a black panel on the light #f8f5ff section.
   -------------------------------------------------------------------------- */
.gta-presence-card {
  margin-top: 45px;
  padding: 28px 28px 22px;
  border-radius: 14px;
  background: linear-gradient(259deg, var(--gta-primary) 0%, var(--gta-primary-dark) 100%);
  box-shadow: var(--gta-shadow);
  isolation: isolate;               /* contains the blend to this card */
  overflow: hidden;
}

.gta-presence-card .gta-presence-title {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-white);
  font-family: var(--font-heading);
}

.gta-presence-card .gta-presence-sub {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.gta-presence-card .gta-presence-map {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: screen;           /* black -> transparent */
}

/* If a browser lacks blend-mode support the image still renders, just on its
   own black background inside the rounded card — degraded but not broken. */
@supports not (mix-blend-mode: screen) {
  .gta-presence-card { background: #0b0611; }
}

/* --------------------------------------------------------------------------
   CONTACT PAGE · Google Map iframe beside the form
   -------------------------------------------------------------------------- */
.gta-contact-map {
  margin-top: 30px;
}

.gta-contact-map iframe {
  width: 100%;
  height: 400px;
  border: none;
  border-radius: 12px;
}

@media (max-width: 991px) {
  .gta-presence-card {
    margin-top: 35px;
    padding: 22px 22px 18px;
  }
}

/* --------------------------------------------------------------------------
   FIX 4 · Floating WhatsApp + Contact Us buttons (site-wide, in footer.php)
   Fixed to the viewport and outside every layout container, so no existing
   positioning is affected. Contact button reuses the theme's purple gradient;
   WhatsApp uses its own brand green, as is conventional and recognisable.
   -------------------------------------------------------------------------- */
.gta-fab {
  position: fixed;
  right: 22px;
  bottom: 96px;                     /* clears .xb-backtotop, which sits at 40-80px */
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-end;
}

.gta-fab__btn {
  position: relative;
  display: flex;
  align-items: center;
  height: 56px;
  max-width: 56px;                  /* collapsed: icon only */
  border-radius: 28px;
  overflow: hidden;
  text-decoration: none;
  color: var(--color-white);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  transition: max-width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
              box-shadow 0.25s ease,
              transform 0.25s ease;
}

.gta-fab__btn:hover,
.gta-fab__btn:focus-visible {
  max-width: 210px;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.38);
  color: var(--color-white);
}

.gta-fab__btn:focus-visible {
  outline: 3px solid var(--gta-gold);
  outline-offset: 3px;
}

.gta-fab__icon {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gta-fab__icon i {
  font-size: 26px;
  line-height: 1;
  color: var(--color-white);
}

.gta-fab__label {
  white-space: nowrap;
  padding-right: 22px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  opacity: 0;
  transition: opacity 0.2s ease 0.1s;
}

.gta-fab__btn:hover .gta-fab__label,
.gta-fab__btn:focus-visible .gta-fab__label {
  opacity: 1;
}

/* Contact Us — theme gradient, same as the footer newsletter button */
.gta-fab__btn--contact {
  background: linear-gradient(259deg, var(--gta-primary) 0%, var(--gta-primary-dark) 100%);
}

/* WhatsApp — brand green. To make it match the theme instead, replace the
   background below with the same gradient used above and delete the animation. */
.gta-fab__btn--wa {
  background: #25D366;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28), 0 0 0 0 rgba(37, 211, 102, 0.5);
  animation: gtaFabPulse 2.6s infinite;
}

.gta-fab__btn--wa:hover {
  background: #1EBE5B;
}

/* Pulse is drawn with box-shadow on the element itself, not a ::after,
   because overflow:hidden above would clip a pseudo-element. */
@keyframes gtaFabPulse {
  0%   { box-shadow: 0 6px 20px rgba(0,0,0,0.28), 0 0 0 0    rgba(37,211,102,0.5); }
  70%  { box-shadow: 0 6px 20px rgba(0,0,0,0.28), 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 6px 20px rgba(0,0,0,0.28), 0 0 0 0    rgba(37,211,102,0); }
}

.gta-fab__btn--wa:hover,
.gta-fab__btn--wa:focus-visible {
  animation: none;
}

@media (max-width: 767px) {
  .gta-fab {
    right: 24px;                    /* 24 + 52/2 = 50px, same axis as back-to-top */
    bottom: 92px;
    gap: 12px;
  }
  .gta-fab__btn {
    height: 52px;
    max-width: 52px;
    border-radius: 26px;
  }
  .gta-fab__btn:hover,
  .gta-fab__btn:focus-visible {
    max-width: 52px;
    transform: none;
  }
  .gta-fab__icon {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
  }
  .gta-fab__label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gta-fab__btn,
  .gta-fab__label { transition: none; }
  .gta-fab__btn--wa { animation: none; }
}

/* ---------------------------------------------------------------------------
   CONTACT FORM CONSENT NOTE
   Fine print under the submit button. The form card sits on the dark
   #222222 -> --gta-primary-dark gradient, so this is a muted white: readable,
   but quiet enough not to compete with the Send request button.
--------------------------------------------------------------------------- */
.xb-contact-form .gta-form-consent {
    margin: 18px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.6);
}

/* ---------------------------------------------------------------------------
   CONTACT FORM FLOATING LABELS - hide the label whenever the field has text
   ---------------------------------------------------------------------------
   main.css floats these labels away with `input:focus + label` and
   `input:valid + label`. That works for a plain required field, where any text
   at all makes it valid, but it breaks down the moment a field has a real
   constraint: the Contact No field has a pattern, and the Email field has
   type="email". Type half a number, tab away, and the field is neither focused
   nor valid - so the label reappears at full opacity directly on top of the
   digits the visitor just typed.

   Keying off :placeholder-shown instead means "has the visitor entered
   anything", which is the question the label actually cares about, and it is
   independent of whether what they entered is valid yet. Every field in the
   form carries placeholder=" " so this matches consistently - a field without
   a placeholder attribute would match :not(:placeholder-shown) permanently and
   lose its label altogether.

   Same two declarations as the existing floated state in main.css, so the
   animation and end position are unchanged.
--------------------------------------------------------------------------- */
.xb-contact-form .xb-input-field input:not(:placeholder-shown) + label,
.xb-contact-form .xb-input-field textarea:not(:placeholder-shown) + label {
    transform: translate(15px, -50%);
    opacity: 0;
}