:root {
  --primary-color: #FF6600; /* This is the orange color */
  --primary-light: #ff8533;
  --primary-dark: #cc5200;
  --text-color: #333333;
  --text-light: #666666;
  --bg-color: #FFFFFF;   /* Default background, usually white */
  --bg-light: #F9F9F9; /* Light gray for section backgrounds */
  --accent-color: #3A86FF; 
  --success-color: #38B000;
  --border-color: #EAEAEA; 
  --shadow: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-strong: 0 8px 30px rgba(0,0,0,0.12);
  --transition: all 0.3s ease;
  --radius: 10px; /* Main border radius */
  --text-on-primary: #FFFFFF; /* Text color for orange backgrounds */
}

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--text-color);
  background: var(--bg-color);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem; 
}

/* Typography (from user's file) */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: var(--text-color);
}
h1 { font-size: clamp(2.5rem, 5vw, 3.2rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(2rem, 4vw, 2.5rem); letter-spacing: -0.01em; }
p { margin-bottom: 1.5rem; }
.highlight { color: var(--primary-color); }

.section-header { text-align: center; margin-bottom: 3rem; }
.section-title { margin-bottom: 0.75rem; }
.section-subtitle { font-size: 1.1rem; color: var(--text-light); max-width: 650px; margin: 0 auto 3rem; }

/* Buttons (from user's file, hero buttons are removed from HTML) */
.btn-primary, .btn-secondary { display: inline-block; padding: 0.8rem 1.8rem; border-radius: 8px; text-decoration: none; font-weight: 600; transition: var(--transition); cursor: pointer; border: 2px solid transparent; }
.btn-primary { background: var(--primary-color); color: var(--text-on-primary); border-color: var(--primary-color); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-secondary { background: transparent; color: var(--primary-color); border: 2px solid var(--primary-color); }
.btn-secondary:hover { background: rgba(255, 102, 0, 0.08); color: var(--primary-dark); border-color: var(--primary-dark); transform: translateY(-2px); }
/* .hero-buttons rule is not needed as buttons are removed from hero */

/* Header & Footer (from user's file, assuming TS_header.html has logo text removed) */
header { background: var(--primary-color); padding: 0.5rem 0; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
header .container { display: flex; align-items: center; justify-content: space-between; }
.logo-container { display: flex; align-items: center; }
header img.logo { height: 70px; width: auto; display: block; }
nav ul { list-style: none; display: flex; gap: 2rem; align-items: center; margin: 0; padding: 0; }
nav a { text-decoration: none; color: var(--text-on-primary); font-weight: 500; transition: var(--transition); position: relative; padding: 0.5rem 0; }
nav a:hover { color: rgba(255, 255, 255, 0.85); }
nav a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: 0.25rem; left: 0; background-color: var(--text-on-primary); transition: var(--transition); }
nav a:hover::after { width: 100%; }
footer { background: var(--primary-color); color: var(--text-on-primary); padding: 3rem 0; margin-top: 4rem; text-align: center; }
footer .container { display: flex; flex-direction: column; align-items: center; }
.footer-nav { display: flex; gap: 1.5rem; margin-bottom: 1.5rem; list-style: none; flex-wrap: wrap; justify-content: center; }
.footer-nav a { text-decoration: none; color: var(--text-on-primary); transition: var(--transition); }
.footer-nav a:hover { color: rgba(255, 255, 255, 0.85); }
footer p { color: var(--text-on-primary); margin-bottom: 0; font-size: 0.9rem; }

/* Hero Section (from user's file) */
.hero-block { padding: 6rem 0 5rem; background: var(--bg-light); text-align: center; }
.hero-block .container { max-width: 800px; }
.hero-block h1 { margin-bottom: 1rem; }
.hero-block p { font-size: 1.25rem; max-width: 700px; margin: 0 auto 2rem; color: var(--text-light); line-height: 1.7; }

/* Services Section (from user's file - styles for cards and swiper are UNTOUCHED) */
.services-section { padding: 5rem 0; background: var(--bg-light); overflow: hidden; }
.services-swiper .swiper-slide { display: flex; align-items: stretch; height: auto; padding: 10px 0; }
.service-card-ref { background-color: var(--bg-color, #FFFFFF); border-radius: var(--radius, 10px); padding: 2rem 1.75rem; display: flex; flex-direction: column; width: 100%; height: 100%; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07); transition: transform 0.3s ease, box-shadow 0.3s ease; text-align: left; }
.service-card-ref:hover { transform: translateY(-6px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }
.service-card-ref-icon-container { margin-bottom: 1.25rem; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: var(--service-color); color: #FFFFFF; flex-shrink: 0; }
.service-icon-ref { font-size: 1.6rem; }
.service-card-ref-title { font-size: 1.25rem; font-weight: 600; color: var(--text-color); margin-bottom: 0.6rem; }
.service-card-ref-description { font-size: 0.9rem; line-height: 1.6; color: var(--text-light); flex-grow: 1; margin-bottom: 0; }
.service-card-ref-description p { margin-bottom: 0.75rem; }
.service-card-ref-description p:last-child { margin-bottom: 0; }
.service-card-ref-description a { color: var(--service-color); text-decoration: none; font-weight: 500; }
.service-card-ref-description a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }

.services-swiper.swiper-container { width: 100%; position: relative; padding-top: 10px; padding-bottom: 60px; overflow: visible; }
.services-swiper .swiper-button-next,
.services-swiper .swiper-button-prev { color: var(--primary-color); width: 36px; height: 36px; background-color: rgba(255, 255, 255, 0.9); border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,0.15); transition: var(--transition); top: 50%; transform: translateY(-calc(50% + 30px)); z-index: 10; }
.services-swiper .swiper-button-next:hover,
.services-swiper .swiper-button-prev:hover { background-color: var(--primary-color); color: white; }
.services-swiper .swiper-button-next.swiper-button-disabled, /* Renamed to services-swiper */
.services-swiper .swiper-button-prev.swiper-button-disabled { opacity: 0.35; cursor: not-allowed !important; }
.services-swiper .swiper-button-next:after, 
.services-swiper .swiper-button-prev:after { font-size: 1rem; font-weight: bold; }
.services-swiper .swiper-pagination { position: absolute; text-align: center; left: 0; right: 0; bottom: 15px; width: 100%; z-index: 10; } /* Renamed to services-swiper */
.services-swiper .swiper-pagination-bullet { background: var(--text-light); opacity: 0.5; width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin: 0 5px !important; transition: var(--transition); cursor: pointer; }
.services-swiper .swiper-pagination-bullet-active { background: var(--primary-color); opacity: 1; transform: scale(1.2); }


/* Process Section - NEW STYLES FOR SWIPER */
.process-section { 
  padding: 5rem 0; 
  background: var(--bg-color); /* Changed to white for contrast with services */
  overflow: hidden; 
}

/* Original .process-steps is now replaced by swiper structure */
/* Commenting out old styles for .process-steps and standalone .process-step */
/*
.process-steps { 
  display: flex; 
  gap: 2rem; 
  justify-content: space-between; 
  margin-top: 3rem; 
  flex-wrap: wrap;
}
.process-step { (original standalone card style)
  flex: 1 1 280px; 
  text-align: center; 
  max-width: 320px; 
  margin: 0 auto 2rem; 
}
*/

/* Styles for Process Step Cards within Swiper */
.process-swiper .swiper-slide { 
  display: flex; 
  justify-content: center; /* Center the card in the slide */
  align-items: stretch; 
  height: auto; 
  padding: 10px 0; /* Add some vertical padding for consistency */
}

.process-step { /* This class is now the card content within a swiper-slide */
  background: var(--bg-color); /* Card background */
  border: 1px solid var(--border-color); /* Subtle border for cards */
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  text-align: center;
  width: 100%;
  height: 100%; /* Ensure card fills slide height */
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Softer shadow */
  transition: var(--transition);
}
.process-step:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.step-number-container { 
  margin-bottom: 1.25rem; 
}
.step-number { 
  width: 50px; 
  height: 50px; 
  background: var(--primary-color); 
  color: white; 
  font-size: 1.3rem; 
  font-weight: 700; 
  border-radius: 50%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}
.process-step h3 { 
  margin-bottom: 0.75rem; 
  font-size: 1.25rem; 
  color: var(--text-color);
}
.process-step p { 
  font-size: 0.9rem; 
  color: var(--text-light); 
  line-height: 1.6; 
  flex-grow: 1; 
  margin-bottom: 0; 
}

/* Swiper Container, Navigation & Pagination for PROCESS Carousel */
.process-swiper.swiper-container {
  width: 100%;
  position: relative;
  padding-top: 10px; 
  padding-bottom: 60px; /* Space for pagination */
  overflow: visible;
}

.process-swiper .swiper-button-next.process-button-next,
.process-swiper .swiper-button-prev.process-button-prev {
  /* Using shared button styles by default, can be overridden if needed */
  /* Example: if you want process buttons to be different color */
  /* color: var(--accent-color); */
  top: 50%;
  transform: translateY(-calc(50% + 30px)); /* Adjust vertical centering */
}
/* Ensure hover and disabled states are inherited or defined if different */
.process-swiper .swiper-button-next.process-button-next:hover,
.process-swiper .swiper-button-prev.process-button-prev:hover {
  /* background-color: var(--accent-color); */
  /* color: white; */
}

.process-swiper .swiper-pagination.process-pagination {
  /* Using shared pagination styles by default */
  bottom: 15px; /* Position from bottom of container padding */
}
.process-swiper .swiper-pagination.process-pagination .swiper-pagination-bullet {}
.process-swiper .swiper-pagination.process-pagination .swiper-pagination-bullet-active {
  /* background: var(--accent-color); */ /* Example if you want different active color */
}


/* Testimonial Section (from user's file) */
.testimonial-section { padding: 5rem 0; background: var(--bg-light); }
.testimonial { max-width: 750px; margin: 0 auto; text-align: center; position: relative; }
.quote-mark { font-size: 5rem; color: var(--primary-color); opacity: 0.15; line-height: 0; margin-bottom: 1.5rem; }
.quote-text { font-size: 1.3rem; line-height: 1.7; font-weight: 400; margin-bottom: 2rem; font-style: italic; }
.testimonial-author { margin-top: 1.5rem; }
.author-name { font-weight: 600; font-size: 1rem; margin-bottom: 0.15rem; }
.author-title { color: var(--text-light); font-size: 0.85rem; margin-bottom: 0; }

/* CTA Section (from user's file) */
.cta-block { padding: 5rem 0; text-align: center; background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: white; }
.cta-block h2 { font-size: clamp(1.8rem, 3.5vw, 2.2rem); margin-bottom: 1rem; }
.cta-block p { font-size: 1.1rem; max-width: 600px; margin: 0 auto 2rem; }
.cta-block .btn-primary { background: white; color: var(--primary-color); }
.cta-block .btn-primary:hover { background: var(--bg-light); color: var(--primary-dark); }

/* Responsive Design (from user's file, with adjustments) */
@media (max-width: 992px) { 
  .container { padding: 0 1rem; }
  h1 { font-size: clamp(2.2rem, 6vw, 2.8rem); }
  h2 { font-size: clamp(1.8rem, 5vw, 2.2rem); }
  /* .process-steps rule is now unused due to swiper */
}

@media (max-width: 768px) { 
  .hero-block { padding: 4rem 0 3rem; }
  .hero-block p { font-size: 1.1rem; }
  .services-section, .process-section, .testimonial-section, .cta-block {
    padding: 3.5rem 0;
  }
  .section-header { margin-bottom: 2rem; }
  .section-subtitle { font-size: 1rem; margin: 0 auto 2rem; }
  .quote-text { font-size: 1.15rem; }
  .btn-primary, .btn-secondary { padding: 0.7rem 1.5rem; font-size: 0.95rem; }
  
  /* Hide ALL Swiper navigation arrows on mobile for cleaner look */
  .swiper-button-next,
  .swiper-button-prev {
    display: none; 
  }
  .service-card-ref, .process-step { /* Apply consistent padding to both card types on mobile */
    padding: 1.5rem 1.25rem; 
  }
  .service-card-ref-icon-container {
    width: 45px; height: 45px; margin-bottom: 1rem;
  }
  .service-icon-ref { font-size: 1.4rem; }
  .step-number-container { margin-bottom: 1rem; } /* Consistent margin for step number */
  .step-number { width: 45px; height: 45px; font-size: 1.2rem; } /* Adjust step number size */

  .service-card-ref-title, .process-step h3 {
    font-size: 1.15rem;
  }
}

@media (max-width: 576px) { 
  nav ul { gap: 0.5rem; flex-wrap: wrap; justify-content: center; } 
  nav a { font-size: 0.9rem; padding: 0.5rem 0.25rem; }
  .hero-block p { font-size: 1rem; }
  .footer-nav { gap: 0.75rem; }
  .footer-nav a { font-size: 0.85rem; }

  .service-card-ref-title, .process-step h3 {
    font-size: 1.1rem;
  }
  .service-card-ref-description, .process-step p {
    font-size: 0.85rem;
  }
}