/* Reset and Global Styles (from global.css & styleguide.css) */
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); /* Import Poppins font */

:root {
  --text-gray-900: rgba(24, 25, 31, 1);
  --default-white: rgba(255, 255, 255, 1);
  --neutralwhite: rgba(255, 255, 255, 1);
  --shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.05);
  --primary-blue: #203e6d;
  --primary-orange: #ff9705;
  --light-gray-bg: #f5f7fa;
  --text-dark: #18191f;
  --text-light-gray: #2e2e2e;
  --border-gray: #cdcdcd;
  --light-orange-bg: #ffebcf;
  --body-bg: #ffffff;
  --mobile-header-height: 80px; /* Variable for mobile header height */
}

* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  font-family: "Poppins", Helvetica, sans-serif; /* Added default font */
  background-color: var(--body-bg);
  color: var(--text-dark);
  line-height: 1.6; /* Added default line-height */
  scroll-behavior: smooth; /* Smooth scrolling */
}

a {
  text-decoration: none;
  color: var(--primary-blue);
  transition: color 0.3s ease; /* Added smooth transition */
}

a:hover {
  color: var(--primary-orange);
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  padding: 0; /* Remove default padding */
}

button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}

img {
  max-width: 100%;
  height: auto;
  display: block; /* Prevent bottom space */
}

.container { /* General container for max-width and centering */
  max-width: 1440px; /* Based on footer line width */
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  width: 100%;
}

main {
  padding-top: 0; /* Default no padding */
}

/* --- Header --- */
.site-header { /* Replaced .frame / .div-2 for header section */
  background-color: var(--default-white);
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 20px; /* Start with mobile padding */
  position: sticky; /* Make header sticky */
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Add shadow for sticky header */
}

.site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.site-header .logo-link img { /* Adjusted logo class */
  width: 300px; /* Adjusted for initial view */
  height: auto;
  display: block;
}

.main-navigation { /* Replaced nav */
  display: flex;
  gap: 28px; /* Spacing between nav items */
  align-items: center;
}

.main-navigation a {
  font-size: 20px;
  line-height: 24px;
  white-space: nowrap;
  color: var(--text-gray-900);
  font-weight: 400; /* Poppins-Regular */
  padding: 5px 0;
  position: relative; /* For hover effect */
}

.main-navigation a::after { /* Underline effect */
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--primary-orange);
  transition: width 0.3s ease;
}

.main-navigation a.active, /* Added class for active page */
.main-navigation a:hover {
  font-weight: 500; /* Poppins-Medium */
  color: var(--primary-orange);
}

.main-navigation a.active::after,
.main-navigation a:hover::after {
  width: 100%;
}


.header-button { /* Renamed button class */
  width: 225px;
  height: 56px;
  background-color: var(--primary-orange);
  border-radius: 4px;
  display: flex; /* Use flex for centering text */
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease;
  cursor: pointer; /* Add cursor */
}
.header-button:hover {
  background-color: #e68600; /* Darker orange on hover */
}

.header-button .sign-up {
  font-family: "Poppins-Bold", Helvetica;
  font-weight: 700;
  color: var(--default-white);
  font-size: 18px;
  line-height: 20px;
  white-space: nowrap;
}

/* Mobile Menu Toggle */
.menu-toggle {
  display: none; /* Hidden by default */
  font-size: 30px;
  background: none;
  border: none;
  color: var(--primary-blue);
  cursor: pointer;
}


/* --- Hero Section (Overlap) --- */
.hero-section { /* Replaced .overlap */
  position: relative;
  height: 600px;
  width: 100%;
  background-image: url(./img/slider_prannya.png);
  background-size: cover;
  background-position: center center;
  color: var(--default-white);
  display: flex;
  align-items: center; /* Align content vertically */
}

.hero-section::before { /* Replaced .rectangle overlay */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
          90deg, /* Changed gradient direction for better text readability */
          rgba(64, 94, 118, 0.8) 0%,
          rgba(64, 94, 118, 0.6) 50%,
          rgba(245, 245, 245, 0) 100%
  );
  z-index: 1;
}

.hero-content { /* Container for hero text and button */
  position: relative;
  z-index: 2;
  max-width: 1400px; /* Constrain text width */
}

.hero-content h1 { /* Replaced .p */
  font-family: "Poppins-SemiBold", Helvetica;
  font-weight: 600;
  font-size: 64px;
  line-height: 1.2; /* Adjusted line height */
  margin-bottom: 20px; /* Spacing */
}

.hero-content .subtitle { /* Replaced .group .text-wrapper-2 */
  font-family: "Poppins-SemiBold", Helvetica;
  font-weight: 600;
  font-size: 20px;
  line-height: 32px;
  margin-bottom: 40px; /* Spacing */
}

.hero-content .cta-button { /* Replaced .div-wrapper */
  width: 300px;
  height: 56px;
  background-color: var(--primary-orange);
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease;
  cursor: pointer; /* Add cursor */
}
.hero-content .cta-button:hover {
  background-color: #e68600;
}

.hero-content .cta-button span { /* Replaced .text-wrapper-3 */
  font-family: "Poppins-Bold", Helvetica;
  font-weight: 700;
  color: var(--neutralwhite);
  font-size: 20px;
  line-height: 24px;
  white-space: nowrap;
}

.hero-slider-dots { /* Replaced .group-2 and its children */
  position: absolute;
  bottom: 30px; /* Position dots */
  left: 50%; /* Center dots */
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 10px; /* Increased gap */
}

.hero-slider-dots span {
  display: block;
  width: 15px; /* Changed to circles */
  height: 15px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5); /* Default dot style */
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.hero-slider-dots span.active {
  background-color: var(--default-white); /* Active dot style */
}


/* --- Features Section (Div-3 on index.html) --- */
.features-section {
  background-color: var(--light-gray-bg);
  padding: 36px 0; /* Use container padding */
}

.features-section .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; /* Distribute items */
  align-items: center;
  gap: 30px; /* Add gap for wrapping */
}

.feature-item { /* Replaced group-* */
  display: flex;
  align-items: center;
  gap: 12px; /* Space between icon and text */
  flex: 1; /* Allow items to take space */
  min-width: 250px; /* Minimum width */
  justify-content: center; /* Center content */
}

.feature-item img,
.feature-item .icon-placeholder { /* .checked, .team replaced with placeholder */
  width: 60px;
  height: 60px;
  flex-shrink: 0; /* Prevent icon shrinking */
  object-fit: contain; /* Ensure icon fits */
}

.feature-item span { /* Replaced .text-wrapper-4 */
  font-family: "Poppins-Regular", Helvetica;
  font-weight: 400;
  color: var(--primary-blue);
  font-size: 20px;
  line-height: 28px;
  white-space: nowrap;
}

/* --- Common Section Styling --- */
.section {
  padding: 80px 0; /* Use container padding */
}

.section-title {
  font-family: "Poppins-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--primary-blue);
  font-size: 36px; /* Slightly smaller than h1 */
  line-height: 44px;
  margin-bottom: 15px;
  text-align: left; /* Default alignment */
}
.section-title.centered {
  text-align: center; /* Optional centered title */
  margin-left: auto;
  margin-right: auto;
  max-width: 800px; /* Limit width for centered title */
}


.section-subtitle {
  font-family: "Poppins-Regular", Helvetica;
  font-weight: 400;
  color: var(--text-light-gray);
  opacity: 0.7;
  font-size: 20px;
  line-height: 32px;
  margin-bottom: 40px; /* Increased spacing */
  max-width: 700px; /* Limit subtitle width */
}
.section-subtitle.centered {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.text-orange { /* Helper class for orange text */
  color: var(--primary-orange) !important;
  font-weight: 600; /* Semibold for highlighted titles */
}

.icon-bullet { /* Styles for vector icons */
  display: flex;
  align-items: flex-start; /* Align icon top */
  gap: 20px; /* Space between icon and text */
  margin-bottom: 30px; /* Increased spacing */
}

.icon-bullet .icon-wrapper {
  width: 35px;
  height: 35px;
  background-color: var(--light-orange-bg);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin-top: 5px; /* Align with text */
}
.icon-bullet .icon-wrapper img {
  width: 18px;
  height: 12px;
}

.icon-bullet .text {
  flex-grow: 1;
}
.icon-bullet .title {
  font-family: "Poppins-Medium", Helvetica;
  font-weight: 500;
  color: var(--primary-orange);
  font-size: 24px;
  line-height: 1.3; /* Adjusted */
  margin-bottom: 10px;
}
.icon-bullet .description {
  font-family: "Poppins-Regular", Helvetica;
  font-weight: 400;
  color: var(--text-light-gray);
  opacity: 0.7;
  font-size: 20px;
  line-height: 32px;
}

.image-composition { /* For sections with multiple overlapping images */
  position: relative;
  flex: 1 1 45%; /* Allow image area to take space, basis 45% */
  min-width: 300px; /* Prevent excessive shrinking */
  display: flex; /* Center content if needed */
  justify-content: center;
  align-items: center;
}
.image-composition-inner { /* Wrapper for actual images */
  position: relative;
  width: 100%;
  max-width: 678px; /* Max width from index */
  height: 500px; /* Height from index */
}

.image-composition .main-image {
  border-radius: 10px; /* Apply border-radius */
  box-shadow: var(--shadow);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.image-composition .overlay-image {
  position: absolute;
  background-color: var(--default-white);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 10px;
  overflow: hidden; /* Ensure image fits */
}
.image-composition .overlay-image img {
  border-radius: 5px; /* Slight radius for inner image */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Specific Image Compositions (from index.html) */
.what-we-offer-images .main-image { /* tania-sk-clean-and */
  position: absolute;
  width: calc(100% - 180px); /* Adjust based on overlay size/pos */
  height: 100%;
  top: 0;
  left: 90px; /* Original offset */
}
.what-we-offer-images .overlay-image-1 { /* tania-sk-a-wrapper */
  width: 180px;
  height: 180px;
  top: 56px;
  left: 0;
}
.what-we-offer-images .overlay-image-2 { /* tania-sk-neatly-wrapper */
  width: 180px;
  height: 180px;
  top: 264px;
  right: 0; /* Use right instead of left offset */
}

/* --- How We Work Section (index.html achievements) --- */
.how-we-work-section {
  background-color: var(--light-gray-bg);
}
.how-we-work-section .container {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  gap: 60px; /* Default gap */
  align-items: flex-start; /* Align items to top */
}

.how-we-work-intro {
  flex: 1 1 35%; /* Intro takes ~35% width */
  min-width: 280px; /* Minimum width */
}

.how-we-work-grid {
  flex: 1 1 60%; /* Grid takes ~60% width */
  min-width: 300px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 30px; /* Row and column gap */
}

.work-step-item {
  display: flex;
  gap: 16px;
  align-items: flex-start; /* Align icon to top */
}

.work-step-item .icon-wrapper {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  margin-top: 5px; /* Align with title */
}
.work-step-item .icon-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Ensure icon fits */
}

.work-step-item .text-content {
  flex-grow: 1;
}

.work-step-item .title {
  font-family: "Poppins-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--primary-orange);
  font-size: 18px;
  line-height: 24px;
  margin-bottom: 8px;
}

.work-step-item .description {
  font-family: "Poppins-Regular", Helvetica;
  font-weight: 400;
  color: var(--text-dark);
  font-size: 16px;
  line-height: 24px;
}

/* --- Why Choose Us Section (index.html) --- */
.why-choose-us-section .container {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping */
  gap: 60px; /* Larger gap */
  align-items: center; /* Vertically center align */
}

.why-choose-us-image {
  position: relative; /* Needed for absolute children */
  flex: 1 1 40%; /* Basis 40% */
  min-width: 280px;
  max-width: 482px; /* Set max-width based on original visual size */
  margin-left: auto; /* Center if needed in flex context */
  margin-right: auto;
  align-self: center; /* Center vertically */
}

.why-choose-us-image .background-shape {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 32px; /* Original offset Y */
  left: 32px; /* Original offset X */
  z-index: 1;
  background-color: var(--primary-orange);
  border-radius: 10px;
  box-shadow: var(--shadow);
  max-width: 450px; /* Add max-width based on original design */
  max-height: 450px; /* Add max-height */
}

.why-choose-us-image .main-image {
  position: relative; /* Relative to its container */
  display: block; /* Ensure block behavior */
  width: 100%; /* Image takes full width of its container */
  max-width: 450px; /* Match the background max-width */
  height: auto; /* <<< FIX: Height adjusts automatically based on width */
  object-fit: cover; /* How image should fit */
  border-radius: 10px;
  z-index: 2; /* Ensure it's above the background shape */
  box-shadow: var(--shadow); /* Optional: shadow on image too */
}

.why-choose-us-content {
  flex: 1 1 55%; /* Basis 55% */
  min-width: 300px;
}

.why-choose-us-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Explicitly 2 columns */
  gap: 40px 30px; /* Row and column gap */
  margin-top: 40px;
}
.choose-us-item { /* group-20, 21, 22, 23 */ }

.choose-us-item .title { /* text-wrapper-16, 19 */
  font-family: "Poppins-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--primary-orange);
  font-size: 18px;
  line-height: 24px;
  margin-bottom: 12px;
}
.choose-us-item .description { /* text-wrapper-17, 18, 20, 21 */
  font-family: "Poppins-Regular", Helvetica;
  font-weight: 400;
  color: var(--text-dark);
  font-size: 16px;
  line-height: 24px;
}


/* --- Services Page Specific Styles (style1.css) --- */
.services-intro {
  background-color: #f4f6fb; /* From frame-2 */
  padding: 65px 0 120px; /* Use container padding, increase bottom for overlap */
}

.services-intro .intro-grid {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping */
  gap: 40px;
  align-items: flex-start;
}

.services-intro .intro-title { /* text-wrapper-4 */
  font-family: "Poppins-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--primary-blue);
  font-size: 40px;
  letter-spacing: 0.30px;
  line-height: 1.3;
  flex: 1 1 45%; /* Basis 45% */
  margin: 0;
  min-width: 300px;
}

.services-intro .intro-text {
  flex: 1 1 50%; /* Basis 50% */
  min-width: 300px;
}

.services-intro .highlight { /* text-wrapper-5 */
  font-family: "Poppins-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--primary-orange);
  font-size: 28px;
  line-height: 36px;
  margin-bottom: 20px;
}

.services-intro .description { /* subtitle */
  font-family: "Poppins-Medium", Helvetica;
  font-weight: 500;
  color: var(--text-dark);
  font-size: 20px;
  line-height: 32px;
  margin: 0;
}

.services-grid-section {
  padding: 0 0 80px; /* Use container padding */
  margin-top: -80px; /* Overlap with intro section */
  position: relative; /* Needed for overlap */
  z-index: 2;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive 4 columns */
  gap: 30px;
}

.service-card { /* overlap-group-wrapper, overlap-group */
  background-color: var(--default-white);
  border-radius: 4px;
  padding: 36px 22px;
  text-align: center;
  min-height: 380px; /* Use min-height */
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.1);
}

.service-card .icon-wrapper { /* group-wrapper */
  width: 100px;
  height: 100px;
  margin-bottom: 32px;
  display: flex; /* Center icon if needed */
  justify-content: center;
  align-items: center;
}
.service-card .icon-wrapper img { /* group-2, 4 */
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}


.service-card .title { /* text-wrapper-6, 7, 8, 9 */
  font-family: "Poppins-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--primary-orange);
  font-size: 24px;
  line-height: 1.3; /* Adjusted */
  margin-bottom: 20px;
  /* Removed white-space: nowrap; */
  min-height: 50px; /* Ensure space for 2 lines */
}

.service-card .description { /* subtitle-2, subtitle-3 */
  font-family: "Poppins-Medium", Helvetica;
  font-weight: 500;
  color: var(--text-dark);
  font-size: 16px;
  line-height: 28px;
  flex-grow: 1; /* Allow text to take remaining space */
}

.order-process-section {
  padding: 80px 0; /* Use container padding */
}
.order-process-section .container {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping */
  align-items: center;
  gap: 60px;
}

.order-process-image { /* overlap-2 */
  position: relative;
  width: 100%; /* Responsive width */
  max-width: 630px;
  height: auto;
  flex: 1 1 45%; /* Basis 45% */
  min-width: 300px;
}
.order-process-image-inner { /* Wrapper for aspect ratio */
  position: relative;
  width: 100%;
  padding-bottom: 90%; /* Aspect ratio based on 570/630 */
}
.order-process-image .background-image { /* group-6 */
  position: absolute;
  width: 79%; /* 500/630 */
  height: 87%; /* 500/570 */
  top: 0;
  left: 0;
  background-image: url(./img/prannya-sevice-2.png);
  background-size: cover;
  background-position: center;
  border-radius: 10px; /* Added radius */
}
.order-process-image .overlay-image { /* tania-sk-wrapper */
  position: absolute;
  width: 41%; /* 260/630 */
  height: 45%; /* 260/570 */
  bottom: 0; /* Positioned bottom right */
  right: 0;
  background-color: var(--default-white);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 10px;
}
.order-process-image .overlay-image img { /* tania-sk */
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}


.order-steps {
  position: relative; /* For line positioning */
  padding-left: 60px; /* Space for the timeline */
  flex: 1 1 50%; /* Basis 50% */
  min-width: 300px;
}
.order-steps::before { /* Vertical line - rectangle-4 */
  content: '';
  position: absolute;
  left: 19px; /* Adjusted based on ellipse position */
  top: 15px; /* Align with first dot center */
  bottom: 15px; /* Align with last dot center */
  width: 2px;
  background-color: #e7e7e7;
  z-index: 1;
}

.order-step { /* Combined step elements */
  position: relative; /* For dot positioning */
  padding-bottom: 60px; /* Space between steps */
  padding-left: 20px; /* Space from timeline */
}
.order-step:last-child {
  padding-bottom: 0;
}

.order-step .dot-wrapper { /* ellipse-wrapper, group-7, 8, 9 */
  position: absolute;
  width: 40px;
  height: 40px;
  left: -40px; /* Position relative to the step text */
  top: 0; /* Align vertically */
  background-color: var(--light-orange-bg);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2; /* Above line */
}
.order-step .dot-wrapper .dot { /* ellipse */
  width: 20px;
  height: 20px;
  background-color: var(--primary-orange);
  border-radius: 50%;
}

.order-step .step-number { /* text-wrapper-15, 16, 17, 18 */
  font-family: "Poppins-Regular", Helvetica;
  font-weight: 400;
  color: var(--text-light-gray);
  opacity: 0.7;
  font-size: 18px;
  line-height: 24px;
  margin-bottom: 4px;
}
.order-step .title { /* text-wrapper-11, 12, 13, 14 */
  font-family: "Poppins-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--text-dark);
  font-size: 18px;
  line-height: 24px;
  margin-bottom: 8px;
}
.order-step .description { /* subtitle-4, 5, 6, 7 */
  font-family: "Poppins-Medium", Helvetica;
  font-weight: 500;
  color: var(--text-dark);
  font-size: 16px;
  line-height: 28px;
}


/* --- About Us Page Specific Styles (style2.css) --- */
.about-section {
  padding: 30px 0; /* Default padding */
}
.about-section .container {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping */
  gap: 60px;
  align-items: center;
}

.about-content {
  flex: 1 1 50%; /* Adjust ratio as needed */
  min-width: 300px;
}
.about-image {
  flex: 1 1 45%;
  min-width: 300px;
  position: relative;
  max-width: 632px; /* Match original */
  width: 100%;
}
.about-image-inner { /* Wrapper for aspect ratio */
  position: relative;
  width: 100%;
  padding-bottom: 100%; /* Square aspect ratio */
}

.about-image .background-shape { /* rectangle-5 / rectangle-6 */
  position: absolute;
  width: 94.9%; /* 600/632 */
  height: 94.9%;
  background-color: var(--primary-orange);
  border-radius: 10px;
}
.about-image .main-image { /* tania-sk-a-clean / tania-sk-a-clean-2 */
  position: absolute;
  width: 94.9%;
  height: 94.9%;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: var(--shadow); /* Add shadow to image */
}

/* Positioning for specific about sections */
.who-we-are .about-content { order: 2; }
.who-we-are .about-image { order: 1; }
.who-we-are .about-image .background-shape { top: 5.1%; left: 5.1%; }
.who-we-are .about-image .main-image { top: 0; left: 0; }

.our-approach .about-content { order: 1; }
.our-approach .about-image { order: 2; }
.our-approach .about-image .background-shape { top: 0; left: 0; }
.our-approach .about-image .main-image { top: 5.1%; left: 5.1%; }

.our-team .about-content { order: 2; }
.our-team .about-image { order: 1; }
.our-team .about-image .background-shape { top: 5.1%; left: 5.1%; }
.our-team .about-image .main-image { top: 0; left: 0; }


.about-content .highlight { /* text-wrapper-12 */
  font-family: "Poppins-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--primary-orange);
  font-size: 30px;
  line-height: 1.2;
  margin-bottom: 15px;
}
.about-content .title { /* section-title-2 */
  font-family: "Poppins-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--primary-blue);
  font-size: 38px;
  line-height: 44px;
  margin-bottom: 25px;
}
.about-content .text { /* text-wrapper-13, 14, 15 */
  font-family: "Poppins-Medium", Helvetica;
  font-weight: 500;
  color: var(--text-dark);
  font-size: 20px; /* Reduced slightly */
  line-height: 1.8; /* Increased line height */
  margin-bottom: 25px;
}
.about-content .text:last-child {
  margin-bottom: 0;
}

/* Approach Bullets */
.approach-bullets {
  margin-top: 30px;
  display: grid; /* Use grid for bullets */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.approach-bullet-item { /* Combining icon-bullet style */
  display: flex;
  align-items: center;
  gap: 15px; /* Reduced gap */
}
.approach-bullet-item .icon-wrapper { /* vector-wrapper, img-wrapper etc. */
  width: 35px;
  height: 35px;
  background-color: var(--light-orange-bg);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
.approach-bullet-item .icon-wrapper img { /* vector / vector-2 */
  width: 18px;
  height: 12px;
}
.approach-bullet-item .text { /* text-wrapper-16, 17, 18, 19 */
  font-family: "Poppins-Medium", Helvetica;
  font-weight: 500;
  color: var(--text-dark);
  font-size: 18px; /* Reduced size */
  line-height: 1.5; /* Adjusted */
  flex-grow: 1;
}

/* --- Contacts Page Specific Styles (style3.css) --- */
.contact-info-section {
  background-color: var(--light-gray-bg);
  padding: 50px 0; /* Use container padding */
}
.contact-info-section .container {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping */
  justify-content: space-around; /* Distribute items */
  gap: 30px; /* Gap between items */
}

.contact-info-item { /* group-9, 11, 13 */
  display: flex;
  align-items: flex-start; /* Align icon to top */
  gap: 20px; /* Space between icon and text */
  flex: 1; /* Allow items to grow equally */
  min-width: 280px; /* Minimum width before wrapping */
  padding: 20px; /* Add padding for better spacing */
  border-radius: 8px; /* Add subtle rounding */
  background-color: var(--body-bg); /* White background */
  box-shadow: var(--shadow); /* Add shadow */
}

.contact-info-item .icon-wrapper { /* group-wrapper */
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}
.contact-info-item .icon-wrapper img { /* group-10, 12, pin.png */
  width: 100%;
  height: 100%;
  object-fit: contain; /* Ensure icon fits */
}

.contact-info-item .text-content {
  flex-grow: 1;
}

.contact-info-item .title { /* text-wrapper-12, 16, 20 */
  font-family: "Poppins-Bold", Helvetica;
  font-weight: 700;
  color: var(--primary-orange);
  font-size: 18px;
  line-height: 1.5; /* Adjusted */
  margin-bottom: 10px;
}

.contact-info-item .detail { /* text-wrapper-13, 14, 15, 17, 18, 19, 21, 22 */
  font-family: "Poppins-Medium", Helvetica;
  font-weight: 500;
  color: var(--text-dark);
  font-size: 16px;
  line-height: 1.5; /* Adjusted */
  margin-bottom: 5px;
}
.contact-info-item .detail:last-child {
  margin-bottom: 0;
}

.map-section { /* element-2 */
  /* Removed background image */
  /* height: 600px; Let iframe control height or set below */
  width: 100%;
  padding: 0; /* Remove padding if any */
  line-height: 0; /* Prevent extra space below iframe */
  overflow: hidden; /* Hide potential overflow */
}
/* Add styles for iframe if used */
.map-section iframe {
  display: block; /* Remove potential space below */
  width: 100%; /* Already set inline, but good practice */
  height: 450px; /* Control height via CSS for responsiveness */
  border: none; /* Already set inline */
}


/* --- Footer --- */
.site-footer { /* Replaced .achievements / .achievements-2 */
  background-color: var(--light-gray-bg);
  padding: 64px 0 40px; /* Use container padding */
  color: var(--text-light-gray);
  font-size: 14px; /* Base font size for footer */
}

.footer-top {
  display: flex;
  flex-wrap: wrap; /* Allow wrapping */
  justify-content: space-between;
  gap: 40px; /* Gap between columns */
  margin-bottom: 50px;
  align-items: flex-start; /* Align items to top */
}

.footer-column.contact-intro {
  flex: 1 1 40%; /* Adjust basis as needed */
  min-width: 300px;
}

.footer-column.contact-form {
  flex: 1 1 55%;
  min-width: 300px;
}

.footer-title { /* section-title */
  font-family: "Poppins-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--primary-blue);
  font-size: 32px; /* Slightly smaller */
  line-height: 40px;
  margin-bottom: 15px;
}

.footer-description { /* description */
  font-family: "Poppins-Regular", Helvetica;
  font-weight: 400;
  color: var(--text-gray-900); /* Uses different color */
  font-size: 16px;
  line-height: 30px;
  margin-bottom: 30px;
}

.footer-form .form-group { /* group, group-3 */
  margin-bottom: 20px;
  /* max-width applied to form-row instead */
}
.footer-form .form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Gap between name and phone */
  margin-bottom: 20px;
  /* UPDATED: Limit width to match button and center */
  max-width: 562px;
  margin-left: auto;
  margin-right: auto;
}
.footer-form .form-row .form-group {
  flex: 1; /* Allow inputs to share space */
  min-width: 200px; /* Min width before stacking */
  margin-bottom: 0; /* Remove bottom margin as row handles it */
}


.footer-form label { /* text-wrapper-2 */
  display: block;
  font-family: "Poppins-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 14px;
  margin-bottom: 8px;
}
.footer-form input[type="text"],
.footer-form input[type="tel"] { /* Added tel type */
  width: 100%; /* Full width */
  height: 48px;
  background-color: #f9fcff;
  border-radius: 4px;
  border: 1px solid var(--border-gray);
  padding: 0 15px; /* Add padding */
  font-size: 14px;
  transition: border-color 0.3s ease;
}
.footer-form input[type="text"]:focus,
.footer-form input[type="tel"]:focus {
  border-color: var(--primary-orange);
  outline: none;
}

.footer-form .submit-button { /* label-wrapper */
  width: 100%; /* Full width */
  max-width: 562px; /* Max width for button */
  height: 56px;
  background-color: var(--primary-orange);
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease, transform 0.2s ease; /* Added transform */
  margin: 10px auto 0; /* Center button */
  /* Add space above button */
  cursor: pointer; /* Add cursor */
}
.footer-form .submit-button:hover {
  background-color: #e68600;
  transform: translateY(-2px); /* Add hover effect */
}
.footer-form .submit-button:active {
  transform: translateY(0); /* Add active effect */
}

.footer-form .submit-button span { /* label-3 */
  font-family: "Poppins-Bold", Helvetica;
  font-weight: 700;
  color: var(--neutralwhite);
  font-size: 20px;
  line-height: 24px;
  white-space: nowrap;
}

.footer-bottom {
  border-top: 1px solid rgba(46, 46, 46, 0.2); /* line */
  padding-top: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start; /* Align items to top */
  gap: 30px;
}


.footer-bottom .about {
  flex: 1 1 30%; /* Approximate width */
  min-width: 250px;
}

.footer-bottom .logo { /* logo-montserrat-2 */
  width: 250px;
  height: auto;
  margin-bottom: 15px;
}

.footer-bottom .about-text { /* text-wrapper-23 / p */
  opacity: 0.7;
  font-family: "Poppins-Regular", Helvetica;
  font-weight: 400;
  color: var(--text-light-gray);
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 15px; /* Space before copyright */
}

.footer-bottom .copyright { /* element */
  opacity: 0.7;
  font-family: "Poppins-Regular", Helvetica;
  font-weight: 400;
  color: var(--text-light-gray);
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
}

.footer-links,
.footer-contacts,
.footer-social { /* group-5, group-28, group-6, group-7, group-29 */
  flex: 1 1 15%; /* Adjusted basis */
  min-width: 160px;
}
.footer-links .column-title,
.footer-contacts .column-title,
.footer-social .column-title {
  opacity: 0.7;
  font-family: "Poppins-SemiBold", Helvetica;
  font-weight: 600;
  color: var(--text-light-gray);
  font-size: 18px; /* Reduced size */
  line-height: 28px;
  white-space: nowrap;
  margin-bottom: 20px; /* Reduced margin */
}

.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li {
  margin-bottom: 10px; /* Reduced margin */
}
.footer-links a { /* text-wrapper-4 to 8, text-wrapper-25 to 30 */
  opacity: 0.7;
  font-family: "Poppins-Regular", Helvetica;
  font-weight: 400;
  color: var(--text-light-gray);
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  transition: opacity 0.3s ease, color 0.3s ease;
}
.footer-links a:hover {
  opacity: 1;
  color: var(--primary-orange);
}


.footer-contacts p { /* text-wrapper-4, 5, 6 */
  opacity: 0.7;
  font-family: "Poppins-Regular", Helvetica;
  font-weight: 400;
  color: var(--text-light-gray);
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 10px; /* Reduced margin */
  /* Removed white-space: nowrap; */
}
/* Added style for contact details container */
.footer-contacts .contact-details {
  /* Inherits font styles from p */
}

.social-icons-list {
  display: flex;
  gap: 16px; /* Reduced space between icons */
  align-items: center;
}
.social-icons-list a img { /* social-icons, social-icons-2, facebook */
  width: 32px;
  height: 32px;
  opacity: 0.7;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.social-icons-list a:hover img {
  opacity: 1;
  transform: scale(1.1);
}

.site-developer {
  width: 100%; /* Ensure it takes full width */
  text-align: center; /* Center the link */
  margin-top: 20px; /* Add some space above */
  font-size: 12px;
  opacity: 0.7;
  order: 99; /* Make sure it's last in flex order */
}
.site-developer a {
  color: var(--text-light-gray);
}
.site-developer a:hover {
  color: var(--primary-orange);
}

/* --- Modal Styles --- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(24, 25, 31, 0.6); /* Semi-transparent dark background */
  display: flex; /* Use flexbox for centering */
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Ensure modal is on top */
  opacity: 0; /* Start hidden */
  visibility: hidden; /* Start hidden */
  transition: opacity 0.4s ease, visibility 0.4s ease;
  backdrop-filter: blur(5px); /* Apply blur effect */
  -webkit-backdrop-filter: blur(5px); /* For Safari */
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-box {
  background-color: var(--default-white);
  width: 400px;
  height: 420px; /* Increased height */
  max-width: 90%; /* Ensure it fits on smaller screens */
  max-height: 90vh; /* Ensure it fits vertically */
  border-radius: 8px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
  padding: 35px 40px; /* More padding */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Changed to center content vertically */
  transform: scale(0.9); /* Start slightly scaled down */
  transition: transform 0.4s ease;
  overflow-y: auto; /* Add scroll if content overflows */
}

.modal-overlay.active .modal-box {
  transform: scale(1); /* Scale to normal size when active */
}

.modal-close-button {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 30px; /* Larger close icon */
  font-weight: 300;
  color: var(--text-light-gray);
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  padding: 5px;
  transition: color 0.3s ease;
}

.modal-close-button:hover {
  color: var(--primary-orange);
}

.modal-title {
  font-family: "Poppins-SemiBold", Helvetica, sans-serif;
  font-weight: 600;
  color: var(--primary-blue);
  font-size: 22px; /* Slightly smaller title */
  line-height: 1.4;
  text-align: center;
  margin-bottom: 25px; /* Increased spacing */
  margin-top: 0; /* Reset margin top */
}

.modal-form {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center form items vertically */
  gap: 20px; /* Space between form elements */
}

.modal-form .form-group {
  margin-bottom: 0; /* Remove default margin */
}

.modal-form label {
  display: block;
  font-family: "Poppins-Medium", Helvetica, sans-serif; /* Match footer */
  font-weight: 500;
  color: var(--text-light-gray);
  font-size: 14px;
  margin-bottom: 8px;
  text-align: left; /* Align labels left */
}

.modal-form input[type="text"],
.modal-form input[type="tel"] {
  width: 100%;
  height: 48px; /* Match footer */
  background-color: #f9fcff;
  border-radius: 4px;
  border: 1px solid var(--border-gray);
  padding: 0 15px;
  font-size: 16px; /* Slightly larger font */
  font-family: "Poppins", Helvetica, sans-serif;
  color: var(--text-dark);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.modal-form input[type="text"]:focus,
.modal-form input[type="tel"]:focus {
  border-color: var(--primary-orange);
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 151, 5, 0.2); /* Subtle focus shadow */
}

.modal-submit-button {
  width: 100%; /* Full width */
  height: 56px; /* Match other buttons */
  background-color: var(--primary-orange); /* Site orange */
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease, transform 0.2s ease;
  cursor: pointer;
  margin-top: 10px; /* Add space above button */
}

.modal-submit-button:hover {
  background-color: #e68600; /* Darker orange */
  transform: translateY(-2px);
}

.modal-submit-button:active {
  transform: translateY(0);
}

.modal-submit-button span {
  font-family: "Poppins-Bold", Helvetica, sans-serif; /* Site button font */
  font-weight: 700;
  color: var(--default-white); /* White text */
  font-size: 18px; /* Match header button */
  line-height: 1;
  white-space: nowrap;
}

/* Prevent background scroll when modal is open */
body.modal-open {
  overflow: hidden;
}


/* --- Responsive Design --- */

/* Large Laptops */
@media (max-width: 1600px) {
  .container { max-width: 1300px; }
  .site-header .logo-link img { width: 350px; }
}

/* Laptops / Desktops */
@media (max-width: 1400px) {
  .container { max-width: 1140px; }
  .site-header .logo-link img { width: 320px; }
  .main-navigation a { font-size: 18px; }
  .header-button { width: 200px; height: 50px; }
  .header-button .sign-up { font-size: 16px; }
  .hero-content h1 { font-size: 56px; }
  .hero-content .subtitle { font-size: 18px; }
  .feature-item span { font-size: 18px; }
  .section-title { font-size: 32px; }
  .section-subtitle { font-size: 18px; }
  .footer-title { font-size: 28px; }
}

/* Smaller Laptops / Large Tablets */
@media (max-width: 1200px) {
  .container { max-width: 960px; }
  .site-header { height: 100px; }
  .site-header .logo-link img { width: 280px; }
  .main-navigation { gap: 20px; }
  .main-navigation a { font-size: 17px; }
  .header-button { width: 180px; height: 48px; }
  .header-button .sign-up { font-size: 15px; }

  .hero-section { height: 550px; }
  .hero-content h1 { font-size: 48px; }
  .hero-content .subtitle { font-size: 17px; line-height: 30px; }
  .hero-content .cta-button { width: 250px; height: 50px; }
  .hero-content .cta-button span { font-size: 18px; }

  .features-section .container { gap: 20px; }
  .feature-item { min-width: 220px; }
  .feature-item span { font-size: 17px; }

  .section { padding: 70px 0; }
  .section-title { font-size: 30px; line-height: 40px; }
  .section-subtitle { font-size: 17px; line-height: 30px; }
  .icon-bullet .title { font-size: 22px; }
  .icon-bullet .description { font-size: 18px; line-height: 30px; }

  .why-choose-us-section .container { gap: 40px; }
  .why-choose-us-grid { gap: 30px 20px; }
  .choose-us-item .title { font-size: 17px; }
  .choose-us-item .description { font-size: 15px; line-height: 22px; }

  .services-intro { padding: 60px 0 100px; }
  .services-intro .intro-title { font-size: 36px; }
  .services-intro .highlight { font-size: 26px; }
  .services-intro .description { font-size: 18px; }

  .services-grid { gap: 25px; }
  .service-card { min-height: 360px; padding: 30px 20px; }
  .service-card .title { font-size: 22px; }
  .service-card .description { font-size: 15px; line-height: 26px; }

  .order-process-section .container { gap: 40px; }
  .order-step .title { font-size: 17px; }
  .order-step .description { font-size: 15px; line-height: 26px; }

  .about-content .highlight { font-size: 28px; }
  .about-content .title { font-size: 34px; line-height: 42px; }
  .about-content .text { font-size: 18px; line-height: 32px; }
  .approach-bullet-item .text { font-size: 17px; }

  .contact-info-item .title { font-size: 17px; }
  .contact-info-item .detail { font-size: 15px; }
  .map-section iframe { height: 400px; }

  .footer { padding: 50px 0 30px; }
  .footer-form .submit-button span { font-size: 18px; }
  .footer-links .column-title, .footer-contacts .column-title, .footer-social .column-title { font-size: 17px; }
}

/* Tablets */
@media (max-width: 992px) {
  .container { max-width: 720px; }
  /* --- Sticky Header Fix for Mobile --- */
  .site-header {
    height: var(--mobile-header-height); /* Use variable height */
    padding: 10px 0; /* Adjusted padding */
    position: fixed; /* Change to fixed for mobile */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95); /* Slightly transparent */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
  /* Add padding to main content to avoid overlap with fixed header */
  main {
    padding-top: var(--mobile-header-height);
  }
  /* --- End Sticky Header Fix --- */

  .site-header .container { flex-wrap: wrap; justify-content: space-between; }
  .site-header .logo-link img { width: 200px; } /* Smaller logo */

  .menu-toggle { display: block; order: 3; margin-left: 20px;} /* Show menu toggle */
  .main-navigation {
    display: none; /* Hide nav by default */
    order: 4;
    flex-direction: column;
    width: 100%;
    background-color: var(--default-white);
    position: absolute;
    top: 100%; /* Position below header */
    left: 0;
    padding: 10px 0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    text-align: center;
    gap: 0; /* Remove gap */
    max-height: 0; /* Start hidden */
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
  }
  .main-navigation.active { /* Class toggled by JS */
    display: flex; /* Show when active */
    max-height: 500px; /* Allow expansion */
  }

  .main-navigation a {
    font-size: 16px;
    width: 100%;
    padding: 12px 20px; /* Full width links */
    border-bottom: 1px solid #eee;
  }
  .main-navigation a::after { display: none; } /* Remove underline */
  .main-navigation a:hover, .main-navigation a.active {
    background-color: var(--light-orange-bg);
  }


  .header-button { order: 2; width: 160px; height: 45px; margin-left: auto;} /* Button next to logo */
  .header-button .sign-up { font-size: 14px; }


  .hero-section { height: 450px; text-align: center; }
  .hero-content { max-width: 100%; }
  .hero-content h1 { font-size: 40px; }
  .hero-content .subtitle { font-size: 16px; line-height: 28px; }
  .hero-content .cta-button { width: 220px; height: 48px; margin: 0 auto; }
  .hero-content .cta-button span { font-size: 16px; }

  .features-section .container { justify-content: center; gap: 25px; }
  .feature-item { flex-basis: 45%; min-width: 200px; }
  .feature-item span { font-size: 16px; }

  .section { padding: 60px 0; }
  .section-title { font-size: 28px; line-height: 36px; text-align: center; }
  .section-subtitle { font-size: 16px; line-height: 28px; text-align: center; margin-left: auto; margin-right: auto; }

  .how-we-work-section .container {
    gap: 8px; /* UPDATED: Further reduced gap */
  }
  .how-we-work-grid { grid-template-columns: 1fr; }
  .work-step-item { align-items: center; text-align: left; }

  /* Why Choose Us - Responsive */
  .why-choose-us-section .container { flex-direction: column; text-align: center; }
  .why-choose-us-image { order: 1; margin: 0 auto 40px; }
  .why-choose-us-content { order: 2; }
  .why-choose-us-grid { grid-template-columns: 1fr; gap: 25px; }

  .services-intro .intro-grid { flex-direction: column; text-align: center; }
  .services-intro .intro-title { font-size: 32px; }
  .services-intro .highlight { font-size: 24px; }
  .services-intro .description { font-size: 17px; }

  .services-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
  .service-card { min-height: auto; }

  .order-process-section .container { flex-direction: column; }
  .order-process-image { order: 1; max-width: 500px; }
  .order-process-steps { order: 2; width: 100%; padding-left: 40px; }

  /* UPDATED: About Us Spacing on Tablet */
  .about-section .container {
    flex-direction: column;
    text-align: center;
    gap: 20px; /* Reduce gap between image/text */
  }
  .about-section.our-team {
    padding-top: 30px; /* Reduce space above team section */
  }
  .about-image { order: 1; max-width: 500px; margin-bottom: 0; /* Remove default bottom margin */ }
  .about-content { order: 2; }
  .about-content .text { font-size: 17px; line-height: 30px; }
  .approach-bullets { grid-template-columns: 1fr; }
  .approach-bullet-item { justify-content: center; }

  .contact-info-section .container { flex-direction: column; gap: 20px; }
  .contact-info-item { flex-direction: column; align-items: center; text-align: center; }
  .contact-info-item .icon-wrapper { margin-bottom: 15px; }

  .map-section iframe { height: 350px; } /* Adjust map height */

  .footer-top { flex-direction: column; align-items: center; text-align: center; gap: 30px;}
  .footer-column.contact-form { flex-basis: 100%; width: 100%; } /* Ensure form takes full width */
  .footer-form .form-row { max-width: 100%; /* Allow row to be full width on tablet */ padding: 0 10px;}
  .footer-form input[type="text"],
  .footer-form input[type="tel"],
  .footer-form .submit-button { max-width: 400px; margin-left: auto; margin-right: auto; }

  /* UPDATED: Footer Bottom Alignment for Tablets */
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start; /* Align items to the start (left) */
    text-align: left;       /* Align text to the left */
    gap: 20px;
  }
  .footer-bottom .about {
    flex-basis: 100%;
    width: 100%; /* Ensure full width */
    text-align: left; /* Ensure text within about column is left-aligned */
  }
  .footer-links ul,
  .footer-contacts,
  .social-icons-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Align items to the start (left) */
    gap: 15px;
    width: 100%; /* Ensure full width */
  }
  .footer-links li { margin-bottom: 0; }
  .footer-contacts p { margin-bottom: 0; text-align: left; } /* Ensure contact text is left-aligned */
}


/* Mobile Phones */
@media (max-width: 576px) {
  .container { max-width: 100%; padding-left: 15px; padding-right: 15px; } /* Full width container */
  .site-header { height: auto; padding: 10px 0; } /* Adjust height for mobile */
  .site-header .logo-link img { width: 180px; }
  .header-button { width: 140px; height: 40px; }
  .header-button .sign-up { font-size: 13px; }
  /* Adjust main padding for potentially smaller fixed header */
  main {
    padding-top: 70px; /* Adjust if header height changes */
  }

  .hero-section { height: 400px; }
  .hero-content h1 { font-size: 32px; line-height: 1.3; }
  .hero-content .subtitle { font-size: 15px; line-height: 26px; margin-bottom: 30px; }
  .hero-content .cta-button { width: 200px; height: 45px; }
  .hero-content .cta-button span { font-size: 15px; }
  .hero-slider-dots { bottom: 20px; }
  .hero-slider-dots span { width: 12px; height: 12px; }

  .features-section .container { gap: 20px; }
  .feature-item { min-width: 0; gap: 10px; justify-content: flex-start; }
  .feature-item img, .feature-item .icon-placeholder { width: 40px; height: 40px; }
  .feature-item span { font-size: 15px; line-height: 22px; }

  .section { padding: 20px 0; } /* Further reduce padding */
  .section-title { font-size: 26px; line-height: 34px; }
  .section-subtitle { font-size: 15px; line-height: 26px; }

  .how-we-work-section .container {
    gap: 8px; /* Halved gap again for smallest mobile */
  }

  .icon-bullet { gap: 5px; margin-bottom: 15px; }
  .icon-bullet .icon-wrapper { width: 30px; height: 30px; }
  .icon-bullet .icon-wrapper img { width: 15px; height: 10px; }
  .icon-bullet .title { font-size: 20px; }
  .icon-bullet .description { font-size: 15px; line-height: 26px; }

  .work-step-item .icon-wrapper { width: 50px; height: 50px; }
  .work-step-item .title { font-size: 17px; }
  .work-step-item .description { font-size: 15px; line-height: 24px; }

  .why-choose-us-section .container { gap: 30px; }
  .why-choose-us-image .background-shape { top: 15px; left: 15px; }
  .choose-us-item .title { font-size: 17px; }
  .choose-us-item .description { font-size: 15px; line-height: 24px; }

  .services-intro { padding: 50px 0 80px; }
  .services-intro .intro-title { font-size: 28px; }
  .services-intro .highlight { font-size: 22px; }
  .services-intro .description { font-size: 16px; }

  .services-grid { grid-template-columns: 1fr; gap: 20px; } /* Single column */
  .service-card .title { font-size: 20px; min-height: 0; }
  .service-card .description { font-size: 15px; line-height: 24px; }

  .order-steps { padding-left: 35px; }
  .order-step .dot-wrapper { width: 35px; height: 35px; left: -30px; }
  .order-step .dot-wrapper .dot { width: 18px; height: 18px; }
  .order-step .step-number { font-size: 15px; }
  .order-step .title { font-size: 17px; }
  .order-step .description { font-size: 15px; line-height: 24px; }

  /* UPDATED: About Us Spacing on Mobile */
  .about-section { padding: 30px 0; }
  .about-section .container {
    gap: 20px; /* Reduced gap for mobile */
  }
  .about-section.our-team {
    padding-top: 15px; /* Further reduced space above team section */
  }
  .about-content .highlight { font-size: 24px; }
  .about-content .title { font-size: 30px; line-height: 38px; }
  .about-content .text { font-size: 16px; line-height: 28px; }
  .approach-bullet-item .text { font-size: 16px; }

  .contact-info-item { padding: 15px; }
  .contact-info-item .icon-wrapper { width: 60px; height: 60px; }
  .contact-info-item .title { font-size: 16px; }
  .contact-info-item .detail { font-size: 14px; }

  .map-section iframe { height: 300px; } /* Adjust map height */

  .footer { padding: 40px 0 20px; }
  .footer-title { font-size: 26px; line-height: 34px; }
  .footer-description { font-size: 15px; line-height: 26px; }
  .footer-form .form-row { padding: 0; }
  .footer-form label { font-size: 13px; }
  .footer-form input[type="text"],
  .footer-form input[type="tel"] { height: 45px; }
  .footer-form .submit-button { height: 48px; }
  .footer-form .submit-button span { font-size: 16px; }

  .footer-bottom .logo { width: 200px; }
  .footer-links .column-title, .footer-contacts .column-title, .footer-social .column-title { font-size: 16px; }
  .footer-links a, .footer-contacts p, .footer-bottom .about-text, .footer-bottom .copyright { font-size: 13px; line-height: 18px; }
  .social-icons-list a img { width: 28px; height: 28px; }

  /* UPDATED: Ensure Footer Bottom Alignment for Mobile */
  .footer-bottom {
    align-items: flex-start; /* Keep left alignment */
    text-align: left;
  }
  .footer-bottom .about {
    text-align: left;
  }
  .footer-links ul,
  .footer-contacts,
  .social-icons-list {
    justify-content: flex-start; /* Keep left alignment */
  }
  .footer-contacts p {
    text-align: left;
  }
}

/* --- Modal Styles --- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(24, 25, 31, 0.6); /* Semi-transparent dark background */
  display: flex; /* Use flexbox for centering */
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Ensure modal is on top */
  opacity: 0; /* Start hidden */
  visibility: hidden; /* Start hidden */
  transition: opacity 0.4s ease, visibility 0.4s ease;
  backdrop-filter: blur(5px); /* Apply blur effect */
  -webkit-backdrop-filter: blur(5px); /* For Safari */
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-box {
  background-color: var(--default-white);
  width: 400px;
  height: 420px; /* Increased height */
  max-width: 90%; /* Ensure it fits on smaller screens */
  max-height: 90vh; /* Ensure it fits vertically */
  border-radius: 8px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
  padding: 35px 40px; /* More padding */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Changed to center content vertically */
  transform: scale(0.9); /* Start slightly scaled down */
  transition: transform 0.4s ease;
  overflow-y: auto; /* Add scroll if content overflows */
}

.modal-overlay.active .modal-box {
  transform: scale(1); /* Scale to normal size when active */
}

.modal-close-button {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 30px; /* Larger close icon */
  font-weight: 300;
  color: var(--text-light-gray);
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  padding: 5px;
  transition: color 0.3s ease;
}

.modal-close-button:hover {
  color: var(--primary-orange);
}

.modal-title {
  font-family: "Poppins-SemiBold", Helvetica, sans-serif;
  font-weight: 600;
  color: var(--primary-blue);
  font-size: 22px; /* Slightly smaller title */
  line-height: 1.4;
  text-align: center;
  margin-bottom: 25px; /* Increased spacing */
  margin-top: 0; /* Reset margin top */
}

.modal-form {
  display: flex;
  flex-direction: column;
  /* height: 100%; Removed fixed height to allow natural flow */
  justify-content: center; /* Center form items vertically */
  gap: 20px; /* Space between form elements */
}

.modal-form .form-group {
  margin-bottom: 0; /* Remove default margin */
}

.modal-form label {
  display: block;
  font-family: "Poppins-Medium", Helvetica, sans-serif; /* Match footer */
  font-weight: 500;
  color: var(--text-light-gray);
  font-size: 14px;
  margin-bottom: 8px;
  text-align: left; /* Align labels left */
}

.modal-form input[type="text"],
.modal-form input[type="tel"] {
  width: 100%;
  height: 48px; /* Match footer */
  background-color: #f9fcff;
  border-radius: 4px;
  border: 1px solid var(--border-gray);
  padding: 0 15px;
  font-size: 16px; /* Slightly larger font */
  font-family: "Poppins", Helvetica, sans-serif;
  color: var(--text-dark);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.modal-form input[type="text"]:focus,
.modal-form input[type="tel"]:focus {
  border-color: var(--primary-orange);
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 151, 5, 0.2); /* Subtle focus shadow */
}

.modal-submit-button {
  width: 100%; /* Full width */
  height: 56px; /* Match other buttons */
  background-color: var(--primary-orange); /* Site orange */
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease, transform 0.2s ease;
  cursor: pointer;
  margin-top: 10px; /* Add space above button */
}

.modal-submit-button:hover {
  background-color: #e68600; /* Darker orange */
  transform: translateY(-2px);
}

.modal-submit-button:active {
  transform: translateY(0);
}

.modal-submit-button span {
  font-family: "Poppins-Bold", Helvetica, sans-serif; /* Site button font */
  font-weight: 700;
  color: var(--default-white); /* White text */
  font-size: 18px; /* Match header button */
  line-height: 1;
  white-space: nowrap;
}

/* Prevent background scroll when modal is open */
body.modal-open {
  overflow: hidden;
}

/* --- Responsive adjustments for Modal --- */
@media (max-width: 576px) {
  .modal-box {
    width: 300px; /* Adjust width */
    height: auto; /* Adjust height */
    max-height: 80vh; /* Adjust max height */
    padding: 30px 25px;
  }
  .modal-title {
    font-size: 20px;
  }
  .modal-form {
    gap: 15px;
  }
  .modal-form input[type="text"],
  .modal-form input[type="tel"] {
    height: 45px;
    font-size: 15px;
  }
  .modal-submit-button {
    height: 50px;
  }
  .modal-submit-button span {
    font-size: 16px;
  }
}