/* 
  Aqua Jeevan RO - Main Stylesheet 
  Palette: #BED9E5 (Light Blue), #083966 (Deep Blue), #365A7A (Medium Blue), #6DAA63 (Green), #FEFEFE (White)
*/

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

:root {
  --primary-color: #083966;
  --secondary-color: #365A7A;
  --accent-color: #6DAA63;
  --light-bg: #BED9E5;
  --white: #FEFEFE;
  --text-dark: #1a1a1a;
  --text-light: #fefefe;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;

  --font-main: 'Outfit', sans-serif;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  --radius-md: 0.5rem;
  --radius-lg: 1rem;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  background-color: var(--white);
  color: var(--text-dark);
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  background-color: var(--gray-200);
  /* Placeholder indication */
  min-height: 200px;
  /* Placeholder structure */
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* Utilities */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.text-center {
  text-align: center;
}

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

.text-accent {
  color: var(--accent-color);
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-primary {
  background-color: var(--primary-color);
  color: var(--white);
}

.btn-primary:hover {
  background-color: var(--secondary-color);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-accent {
  background-color: var(--accent-color);
  color: var(--white);
}

.btn-accent:hover {
  background-color: #5b9252;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.section {
  padding: 5rem 0;
}

.section-title {
  font-size: 2.5rem;
  color: var(--primary-color);
  margin-bottom: 3rem;
  text-align: center;
}

/* Header */
.site-header {
  background-color: var(--white);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 1rem 0;
}

.nav-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
 
/* make room for absolutely positioned mobile toggle */
.nav-wrapper {
  position: relative;
}
.logo {
  display: flex;
  align-items: center;
}

.logo img {
  height: 75px;
  width: auto;
  min-height: unset;
  background-color: transparent;
  border-radius: 0;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-links a {
  font-weight: 500;
  color: var(--secondary-color);
  position: relative;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--primary-color);
}

.nav-links a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: var(--accent-color);
  transition: width 0.3s;
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

/* Hero Section */
.hero {
  background: linear-gradient(135deg, var(--light-bg) 0%, #fff 100%);
  padding: 6rem 0;
  display: flex;
  align-items: center;
}

.hero .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.hero .footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.hero-content h1 {
  font-size: 3.5rem;
  line-height: 1.2;
  color: var(--primary-color);
  margin-bottom: 1.5rem;
}

.hero-content p {
  font-size: 1.125rem;
  color: var(--secondary-color);
  margin-bottom: 2rem;
  max-width: 500px;
}

/* Card Grid */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.card {
  background: var(--white);
  padding: 2rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--gray-100);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.card-icon {
  width: 60px;
  height: 60px;
  background-color: var(--light-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
}

.card h3 {
  color: var(--primary-color);
  margin-bottom: 1rem;
}

/* Footer */
.site-footer {
  background-color: var(--primary-color);
  color: var(--white);
  padding-top: 5rem;
  padding-bottom: 2rem;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer-col h4 {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  color: var(--light-bg);
}

.footer-links li {
  margin-bottom: 0.75rem;
}

.footer-links a:hover {
  color: var(--accent-color);
  padding-left: 5px;
}

.footer-bottom {
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 2rem;
  color: var(--gray-200);
}

/* Hero Form */
.hero-form-container {
  background: var(--white);
  padding: 2rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--gray-100);
}

.hero-form-container h3 {
  color: var(--primary-color);
  margin-bottom: 1.5rem;
  text-align: center;
}

.form-group {
  margin-bottom: 1rem;
}

.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.form-control:focus {
  outline: none;
  border-color: var(--secondary-color);
  box-shadow: 0 0 0 3px rgba(54, 90, 122, 0.1);
}

.btn-block {
  width: 100%;
}

/* Mobile Responsive */
@media (max-width: 768px) {

  /* Navigation */
  .mobile-nav-toggle {
    display: block !important;
    /* Show hamburger on mobile */
  }

  /* Slide-in right panel navigation for mobile */
  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100%;
    width: 260px;
    background-color: var(--white);
    flex-direction: column;
    padding: 2.5rem 1.25rem;
    gap: 1rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    display: flex;
    transition: right 0.32s ease;
    z-index: 1500;
    border-left: 1px solid var(--gray-100);
  }

  .nav-links.active {
    right: 0;
  }

  .nav-links a {
    display: block;
    padding: 0.5rem 0;
    width: 100%;
    text-align: center;
  }

  /* Position the hamburger in the top-right corner */
  .mobile-nav-toggle {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    z-index: 1600;
  }

  /* Transform hamburger into X when active */
  .mobile-nav-toggle .bar {
    background-color: var(--primary-color);
  }

  .mobile-nav-toggle.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .mobile-nav-toggle.active .bar:nth-child(2) {
    opacity: 0;
  }

  .mobile-nav-toggle.active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* Hero Section */
  .hero .container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-content h1 {
    font-size: 2.5rem;
    /* Smaller font on mobile */
  }

  .hero-content p {
    margin: 0 auto 2rem;
  }

  .hero-form-container {
    margin-top: 2rem;
  }

  /* Section Titles */
  .section-title {
    font-size: 2rem;
  }

  /* Product/Service Horizontal Cards Stacking */
  .product-img-wrapper {
    flex: 0 0 100%;
    /* Full width image */
    max-width: 100%;
    height: 250px;
    /* Fixed height for consistency */
  }

  .product-card-horizontal {
    flex-direction: column;
    /* Stack vertically */
  }

  .product-content {
    padding: 1rem;
  }
}

/* Toggle Button Style (Hidden on Desktop) */
.mobile-nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.mobile-nav-toggle .bar {
  display: block;
  width: 25px;
  height: 3px;
  background-color: var(--primary-color);
  margin: 5px 0;
  transition: all 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Feature Section */
.feature-section {
  width: 100%;
  /* Gradient: Green on left (30%), Blue on right. 
       Using 106deg (180 - 74) effectively creates a line rotated. 
       But user asked for "rotate(74 deg)". 
       Standard angle usage: 74deg usually means bottom-left to top-right.
       If we want a strict verticalish split, we might need adjustments, 
       but `74deg` is the specific request. 
       Wait, if we rotate a vertical line by 74 degrees, it becomes almost horizontal.
       Let's assume they mean the gradient axis is 74deg or the dividing line is.
       If dividing line is 74deg (from vertical?), that's confusing.
       Let's try linear-gradient(74deg, ...) as interpretated literally.
    */
  background: linear-gradient(74deg, var(--accent-color) 30%, var(--primary-color) 30%);
  padding: 6rem 0;
  color: var(--white);
  overflow: hidden;
  /* Ensure content doesn't spill if rotated oddly */
}

/* Container centers the inner content */
.feature-section .container {
  max-width: 1200px;
}

.feature-layout {
  display: flex;
  align-items: center;
  gap: 4rem;
}

.feature-image {
  flex: 1;
  display: flex;
  justify-content: center;
  /* Center image in its half */
}

.feature-image img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 4px solid rgba(255, 255, 255, 0.2);
  /* Subtle styling */
  max-height: 500px;
  width: 100%;
  object-fit: cover;
}

.feature-content {
  flex: 1;
}

.feature-header {
  margin-bottom: 3rem;
}

.feature-header h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--white);
}

.feature-header p {
  font-size: 1.1rem;
  opacity: 0.9;
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}

.feature-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.feature-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.feature-item h4 {
  font-size: 1.2rem;
  font-weight: 600;
}

.feature-item p {
  font-size: 0.95rem;
  opacity: 0.8;
}

.feature-action .btn {
  background-color: var(--white);
  color: var(--primary-color);
  padding: 1rem 2rem;
  font-size: 1.1rem;
}

.feature-action .btn:hover {
  background-color: var(--accent-color);
  color: var(--white);
}


/* Why Us Section */
.why-us-section {
  position: relative;
  overflow: hidden;
}

.why-rows {
  display: flex;
  align-items: center;
  gap: 4rem;
  position: relative;
}

/* Background SVG Wrapper */
.why-images {
  flex: 1;
  position: relative;
}

.why-bg-svg {
  position: absolute;
  top: -50px;
  left: -50px;
  z-index: 0;
  width: 120%;
  pointer-events: none;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.why-bg-svg svg {
  width: 100%;
  height: auto;
  animation: spin 8s linear infinite;
}

/* Masonry Grid */
.masonry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 250px 250px;
  /* fixed height rows for grid */
  gap: 1.5rem;
  position: relative;
  z-index: 1;
  /* Above SVG */
}

.grid-item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.grid-item:hover img {
  transform: scale(1.05);
}

/* First item spans 2 rows - creates the 'masonry' tall item look */
.item-1 {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.item-2 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.item-3 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}


/* Why Content */
.why-content {
  flex: 1;
}

.why-content h3 {
  font-size: 1.8rem;
  color: var(--primary-color);
  margin-bottom: 1.5rem;
  font-weight: 700;
}

.why-content p {
  color: #4b5563;
  /* Gray-600 ish */
  margin-bottom: 2rem;
  font-size: 1.05rem;
}

.why-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.why-list li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.why-list .icon-box {
  width: 40px;
  height: 40px;
  background-color: var(--light-bg);
  color: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  flex-shrink: 0;
}

.why-list h4 {
  font-size: 1.1rem;
  color: var(--secondary-color);
  margin-bottom: 0.25rem;
}

.why-list p {
  margin-bottom: 0;
  font-size: 0.95rem;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .feature-layout {
    flex-direction: column;
    text-align: center;
  }

  .feature-section {
    background: linear-gradient(180deg, var(--accent-color) 30%, var(--primary-color) 30%);
    /* On mobile, maybe stacking colors top/bottom makes more sense? 
           Or keep diagonal? Let's keep diagonal but maybe adjust connection.
           Actually, keeping the requested design is safer, but content might overlap background awkwardly.
           Let's stick to the request for now, or just let flexible stack.
        */
    background: linear-gradient(74deg, var(--accent-color) 30%, var(--primary-color) 30%);
  }

  .feature-image img {
    margin-bottom: 2rem;
  }

  .feature-grid {
    text-align: left;
    text-align: left;
    /* Keep left alignment for list readability */
  }

  .why-bg-svg {
    width: 100%;
    left: 0;
  }

  /* On mobile, maybe un-masonry or keep grid? */
  .masonry-grid {
    grid-template-rows: 200px 200px;
  }
}

/* Service Slider */
.service-slider-container {
  position: relative;
  width: 100%;
  margin-top: 2rem;
  overflow: hidden;
  padding: 1rem 0;
}

.service-slider-track-container {
  overflow: hidden;
  margin: 0 40px;
  /* Space for buttons */
}

.service-slider-track {
  display: flex;
  gap: 2rem;
  transition: transform 0.5s ease-in-out;
}

.service-card {
  min-width: 300px;
  /* Fixed width for slider cards */
  flex: 0 0 300px;
  margin: 0;
  /* Override default card margins if any */
}

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--primary-color);
  color: var(--white);
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: var(--shadow-md);
  transition: background-color 0.3s;
}

.slider-btn:hover {
  background-color: var(--accent-color);
}

.prev-btn {
  left: 0;
}

.next-btn {
  right: 0;
}

@media (max-width: 768px) {
  .service-card {
    min-width: 250px;
    flex: 0 0 250px;
  }
}

/* Testimonials Section */
.testimonial-section {
  background-color: var(--white);
  padding: 5rem 0;
  position: relative;
}

.testimonial-slider-container {
  position: relative;
  width: 100%;
  margin-top: 3rem;
}

.testimonial-track-container {
  overflow: hidden;
  margin: 0 50px;
  /* Space for buttons */
}

.testimonial-track {
  display: flex;
  gap: 2rem;
  transition: transform 0.5s ease-in-out;
}

.testimonial-card {
  min-width: 350px;
  flex: 0 0 350px;
  background-color: var(--white);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  /* Softer, premium shadow */
  border: 1px solid var(--gray-100);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  transition: transform 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.testi-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.testi-avatar {
  width: 50px;
  height: 50px;
  background-color: var(--light-bg);
  color: var(--primary-color);
  font-weight: 700;
  font-size: 1.2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.testi-name {
  font-size: 1.1rem;
  color: var(--primary-color);
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.testi-location {
  font-size: 0.9rem;
  color: #6b7280;
  /* Gray-500 */
}

.testi-rating {
  color: #fbbf24;
  /* Amber-400 */
  font-size: 1.2rem;
  letter-spacing: 2px;
}

.testi-text {
  font-style: italic;
  color: var(--text-dark);
  font-size: 1.05rem;
  line-height: 1.7;
}

/* Responsive Testimonials */
@media (max-width: 768px) {
  .testimonial-track-container {
    margin: 0 0;
    /* Remove side margin for full width on mobile */
  }

  .testimonial-slider-container {
    padding: 0 20px;
    /* Internal padding instead */
  }

  .slider-btn {
    width: 35px;
    height: 35px;
    font-size: 1.2rem;
  }

  .prev-btn {
    left: -10px;
  }

  .next-btn {
    right: -10px;
  }

  .testimonial-card {
    min-width: 280px;
    flex: 0 0 280px;
    padding: 1.5rem;
  }
}

/* Fixed Book Demo Button & Modal */
.fixed-demo-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1001;
  /* Above almost everything */
  background-color: var(--accent-color);
  color: var(--white);
  border: none;
  padding: 1rem 1.5rem;
  border-radius: 50px;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
  font-family: var(--font-main);
  animation: pulse 2s infinite;
}

.fixed-demo-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  background-color: #5b9252;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(109, 170, 99, 0.7);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(109, 170, 99, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(109, 170, 99, 0);
  }
}

/* Modal Styling */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  z-index: 2000;
  /* Highest z-index */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  align-items: center;
  justify-content: center;
  /* Blur Background Overlay handled by class on elements or backdrop-filter */
  /* Using backdrop-filter here if browser supports it, else fallback to JS class logic */
  backdrop-filter: blur(5px);
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 2.5rem;
  border: 1px solid #888;
  width: 90%;
  max-width: 500px;
  border-radius: var(--radius-lg);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  position: relative;
  animation: slideDown 0.4s ease;
}

@keyframes slideDown {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.close-modal {
  color: #aaa;
  position: absolute;
  top: 15px;
  right: 25px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.3s;
}

.close-modal:hover,
.close-modal:focus {
  color: var(--primary-color);
  text-decoration: none;
}

.modal h3 {
  color: var(--primary-color);
  margin-bottom: 0.5rem;
  text-align: center;
  font-size: 1.8rem;
}

.modal p {
  text-align: center;
  margin-bottom: 1.5rem;
  color: #666;
}

/* Fallback blur classes if backdrop-filter isn't enough or requested specifically on elements */
.blur-bg {
  filter: blur(5px);
  transition: filter 0.3s;
}

@media (max-width: 768px) {
  .fixed-demo-btn {
    bottom: 15px;
    right: 15px;
    padding: 0.8rem 1.2rem;
    font-size: 0.9rem;
  }
}

/* WhatsApp Fixed Button */
.whatsapp-btn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  /* Opposite side to balance */
  z-index: 1001;
  background-color: #25D366;
  /* WhatsApp Green */
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  animation: bounceIn 1s ease;
}

.whatsapp-btn:hover {
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  background-color: #20BA56;
}

.whatsapp-btn svg {
  width: 35px;
  height: 35px;
}

@keyframes bounceIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  60% {
    transform: scale(1.1);
    opacity: 1;
  }

  100% {
    transform: scale(1);
  }
}

@media (max-width: 768px) {
  .whatsapp-btn {
    bottom: 15px;
    left: 15px;
    width: 50px;
    height: 50px;
  }

  .whatsapp-btn svg {
    width: 28px;
    height: 28px;
  }
}

/* Quick Call Section */
.quick-call-section {
  background: linear-gradient(90deg, rgba(253, 74, 54, 0.06), rgba(2, 132, 199, 0.03));
  padding: 2.5rem 0;
  margin: 2rem 0;
  border-radius: 12px;
}

.quick-call {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.quick-call-content h2 {
  margin: 0 0 .25rem 0;
}

.quick-call-form {
  display: flex;
  gap: .75rem;
  align-items: center;
  width: 100%;
  max-width: 520px;
}

.quick-call-form .form-control {
  flex: 1;
  padding: .75rem 1rem;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.quick-call-form .btn {
  white-space: nowrap;
  padding: .75rem 1rem;
}

@media(max-width:700px) {
  .quick-call {
    flex-direction: column;
    align-items: stretch;
  }

  .quick-call-form {
    width: 100%;
  }
}

/* FAQ Section */
.faq-section {
  background-color: #f9fafb;
  padding: 5rem 0;
}

.faq-header {
  text-align: center;
  margin-bottom: 3rem;
}

.faq-header h2 {
  color: var(--primary-color);
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.faq-grid {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item:hover {
  box-shadow: var(--shadow-sm);
}

.faq-question {
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
  color: var(--secondary-color);
  transition: color 0.3s ease;
}

.faq-question:hover {
  color: var(--primary-color);
}

.faq-question.active {
  color: var(--primary-color);
  background-color: rgba(109, 170, 99, 0.05);
}

.faq-toggle {
  font-size: 1.5rem;
  line-height: 1;
  transition: transform 0.3s ease;
  color: var(--accent-color);
}

.faq-question.active .faq-toggle {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
  padding: 0 1.5rem;
}

.faq-answer p {
  padding-bottom: 1.5rem;
  color: var(--text-dark);
  /* Ensure dark color */
  font-size: 0.95rem;
  line-height: 1.6;
}

.faq-item.active .faq-answer {
  opacity: 1;
  max-height: 500px;
}

/* =========================================
   ABOUT PAGE STYLES
   ========================================= */

/* Principle Cards */
.principle-card {
  text-align: center;
  border-top: 4px solid var(--primary-color);
  padding: 2.5rem 1.5rem;
  height: 100%;
}

.principle-card:hover {
  border-top-color: var(--accent-color);
}

.principle-icon {
  width: 70px;
  height: 70px;
  background-color: #e0f2fe;
  color: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 1.5rem;
  transition: all 0.3s ease;
}

.principle-card:hover .principle-icon {
  background-color: var(--primary-color);
  color: var(--white);
  transform: rotateY(360deg);
}

/* Timeline Section (Our Way of Work) */
.timeline-section {
  position: relative;
  background-color: var(--white);
  overflow: hidden;
}

.timeline {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 0;
}

/* The vertical line */
.timeline::after {
  content: '';
  position: absolute;
  width: 4px;
  background-color: var(--gray-200);
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -2px;
  border-radius: 2px;
}

.timeline-item {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
  box-sizing: border-box;
  animation: fadeInUp 0.5s ease-in-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Place items left and right */
.timeline-item.left {
  left: 0;
}

.timeline-item.right {
  left: 50%;
}

/* The dots */
.timeline-item::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  right: -10px;
  background-color: var(--white);
  border: 4px solid var(--accent-color);
  top: 25px;
  border-radius: 50%;
  z-index: 1;
  transition: all 0.3s ease;
}

.timeline-item.right::after {
  left: -10px;
}

.timeline-item:hover::after {
  background-color: var(--accent-color);
  transform: scale(1.2);
}

/* Content box */
.timeline-content {
  padding: 1.5rem;
  background-color: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border-left: 4px solid var(--accent-color);
  position: relative;
  transition: transform 0.3s ease;
}

.timeline-content:hover {
  transform: translateX(5px);
  box-shadow: var(--shadow-lg);
}

.timeline-item.right .timeline-content {
  border-left: none;
  border-right: 4px solid var(--accent-color);
}

.timeline-item.right .timeline-content:hover {
  transform: translateX(-5px);
}

.timeline-content h3 {
  color: var(--primary-color);
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.timeline-content p {
  margin-bottom: 0;
  font-size: 0.95rem;
  color: #555;
}

/* Media queries for timeline */
@media screen and (max-width: 768px) {
  .timeline::after {
    left: 31px;
  }

  .timeline-item {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

  .timeline-item::after {
    left: 21px;
  }

  .timeline-item.left,
  .timeline-item.right {
    left: 0;
  }

  .timeline-item.right .timeline-content {
    border-right: none;
    border-left: 4px solid var(--accent-color);
  }

  .timeline-item.right .timeline-content:hover {
    transform: translateX(5px);
  }
}

/* Mission Cards */
.mission-card {
  text-align: center;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--white);
  transition: transform 0.3s ease;
}

.mission-card h3 {
  color: var(--white);
  /* Overriding default card h3 color */
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.mission-card p {
  color: rgba(255, 255, 255, 0.9);
}


/* Breadcrumb Styles */
.page-header {
  background: linear-gradient(rgba(8, 57, 102, 0.8), rgba(8, 57, 102, 0.8)), url('../assets/images/feature-section.jpg');
  /* Corrected path */
  background-size: cover;
  background-position: center;
  padding: 3rem 0;
  text-align: center;
  color: var(--white);
  margin-bottom: 2rem;
}

.breadcrumb {
  display: inline-flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  padding: 0.5rem 1.5rem;
  border-radius: 50px;
  font-size: 0.95rem;
  font-weight: 500;
}

.breadcrumb a {
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.3s;
}

.breadcrumb a:hover {
  color: var(--white);
}

.breadcrumb span {
  margin: 0 0.5rem;
  color: rgba(255, 255, 255, 0.6);
}


.breadcrumb .current {
  color: var(--accent-color);
  font-weight: 600;
}

/* Expertise Section */
.expertise-section {
  background-color: #e0f2fe;
  /* Light blue similar to image */
  padding: 5rem 0;
}

.expertise-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.expertise-content h2 {
  font-size: 2.8rem;
  color: var(--primary-color);
  line-height: 1.2;
  margin-bottom: 2rem;
}

.expertise-content p {
  color: #4b5563;
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

.expertise-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.expertise-list li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  font-size: 1.05rem;
  color: var(--secondary-color);
}

.expertise-list li::before {
  content: '✓';
  color: var(--primary-color);
  /* Matches theme */
  font-weight: bold;
  font-size: 1.2rem;
}

.expertise-stats {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.stat-card {
  background-color: var(--white);
  padding: 2rem;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  /* Soft shadow */
  text-align: center;
  transition: transform 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.stat-number {
  display: block;
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--primary-color);
  /* Matches image text color roughly */
  margin-bottom: 0.5rem;
}

.stat-label {
  color: #4b5563;
  font-weight: 500;
  font-size: 1.1rem;
}

@media (max-width: 768px) {
  .expertise-wrapper {
    grid-template-columns: 1fr;
  }

  .expertise-content h2 {
    font-size: 2.2rem;
  }
}

/* =========================================
   PRODUCTS PAGE STYLES
   ========================================= */

/* Layout */
.products-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2rem;
  padding-top: 3rem;
  padding-bottom: 5rem;
}

/* Sidebar Styles */
.filter-sidebar {
  background: var(--white);
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  height: fit-content;
  position: sticky;
  top: 100px;
  /* Adjust based on header height */
}

.filter-group {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--gray-200);
}

.filter-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.filter-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.filter-list {
  list-style: none;
}

.filter-item {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #555;
  cursor: pointer;
}

.filter-item input[type="checkbox"] {
  accent-color: var(--primary-color);
  width: 16px;
  height: 16px;
}

/* Product Grid */
.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 2 products per row as requested */
  gap: 2rem;
}

/* Horizontal Product Card */
.product-card-horizontal {
  display: flex;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.3s ease;
  height: 100%;
  /* Uniform height */
}

.product-card-horizontal:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-5px);
  border-color: var(--primary-color);
}

/* Left: Image (30%) */
.product-img-wrapper {
  flex: 0 0 50%;
  /* Slightly more than 30% for better visual balance on mobile/tablet, but close to request */
  max-width: 50%;
  position: relative;
  background-color: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-img-wrapper img {
  width: 100%;
  height: 100%;
  /* Square-ish aspect ratio handled by container or object-fit */
  /* object-fit: contain; */
  /* Don't crop the product */
  padding: 1rem;
  aspect-ratio: 1 / 1;
  /* Force square */
}

/* Right: Content */
.product-content {
  flex: 1;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.product-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

.product-desc {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 1rem;
  flex-grow: 1;
  /* Pushes price down */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  /* Limit text lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pricing Section */
.product-price-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.price-actual {
  font-size: 1.1rem;
  color: #000;
  /* Black as requested */
  text-decoration: line-through;
  opacity: 0.7;
}

.price-discounted {
  font-size: 1.4rem;
  color: #dc2626;
  /* Red as requested */
  font-weight: 700;
}

.discount-badge {
  background-color: #dcfce7;
  color: #16a34a;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  margin-left: auto;
  /* Push to right */
}

.product-action {
  margin-top: auto;
}

/* Buy Now Modal */
.buy-modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  backdrop-filter: blur(5px);
  background-color: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
}

.buy-modal.active {
  display: flex;
}

.buy-modal-content {
  background-color: #fff;
  width: 90%;
  max-width: 900px;
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  position: relative;
  animation: slideDown 0.4s ease;
}

.modal-close-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 1.8rem;
  cursor: pointer;
  z-index: 10;
  color: #666;
  background: none;
  border: none;
}

/* Modal Left: Product Preview */
.modal-product-preview {
  background-color: #f3f4f6;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1px solid #e5e7eb;
}

.modal-product-img {
  max-width: 80%;
  max-height: 250px;
  object-fit: contain;
  margin-bottom: 1.5rem;
}

.modal-product-info h3 {
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

.modal-product-price {
  font-size: 1.5rem;
  color: #dc2626;
  font-weight: 700;
}

/* Modal Right: Form */
.modal-form-section {
  padding: 2.5rem;
}

.modal-form-section h3 {
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}

.modal-form-section p {
  color: #666;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .products-layout {
    grid-template-columns: 1fr;
  }

  .filter-sidebar {
    position: static;
    margin-bottom: 2rem;
  }

  .filter-group {
    display: inline-block;
    margin-right: 2rem;
    border-bottom: none;
  }
}

@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: 1fr;
  }

  .product-img-wrapper {
    flex: 0 0 30%;
    /* Strict 30% on mobile */
    max-width: 30%;
  }

  .buy-modal-content {
    grid-template-columns: 1fr;
    max-height: 90vh;
    overflow-y: auto;
  }

  .modal-product-preview {
    padding: 1.5rem;
    flex-direction: row;
    gap: 1rem;
    text-align: left;
    justify-content: flex-start;
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
  }

  .modal-product-img {
    width: 60px;
    height: 60px;
    margin-bottom: 0;
  }
}

/* Products Gallery Section */
.products-gallery-section {
  background-color: var(--white);
  padding: 3rem 0;
}

.products-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

.gallery-product-card {
  background-color: white;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.gallery-product-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.gallery-product-img {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.gallery-product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery-product-card:hover .gallery-product-img img {
  transform: scale(1.05);
}

/* Aqua Jeevan logo watermark on gallery images */
.products-gallery-section .gallery-product-img::after {
  content: '';
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 50px;
  height: 50px;
  background-image: url('../../assets/images/logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.gallery-product-name {
  padding: 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-dark);
  text-align: center;
  line-height: 1.4;
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Responsive adjustments for Products Gallery */
@media (max-width: 1024px) {
  .products-gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .products-gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
  }

  .gallery-product-name {
    padding: 0.75rem 0.5rem;
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .products-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .gallery-product-card {
    border-radius: var(--radius-md);
  }

  .gallery-product-name {
    padding: 0.75rem 0.5rem;
    font-size: 0.8rem;
  }
}

.footer-col .logo{
  justify-content: center;
}
.logo img{
  height: 100px;
}
.gst{
  text-align: center;
}