/* style.css */
:root {
  --light-gray: #dfe0e1;
  --blue: #219bda;
  --dark-gray: #2c2d2e;
  --lime: #a3cb46;
  --green: #26854c;
  --white: #ffffff;
  --dark-green: #1a5c38;
}

/* Base Styles */
body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--light-gray);
  color: var(--dark-gray);
  scroll-behavior: smooth;
  line-height: 1.6;
}

h1, h2, h3, h4 {
  margin: 0 0 1rem;
  line-height: 1.2;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
}

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

.section-subtitle {
  color: var(--dark-gray);
  margin-bottom: 3rem;
  font-size: 1.1rem;
  text-align: center;
}

/* Navigation */
.main-nav {
  background-color: var(--white);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  transition: all 0.3s ease;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
}

/* Logo Styles */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
}

.logo-img {
  height: 200px;
  width: auto;
  transition: all 0.3s ease;
}

.logo:hover .logo-img {
  transform: scale(1.1);
}

/* Logo Text Group */
.logo-text-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.company-name {
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--dark-gray);
  transition: all 0.3s ease;
}

.highlight-word {
  color: var(--green);
  font-weight: 800;
}

.desktop-phone {
  display: none;
  font-size: 1.4rem;
  color: var(--dark-gray);
  align-items: center;
  gap: 5px;
  transition: all 0.3s ease;
}

.desktop-phone i {
  color: var(--green);
  font-size: 1.45rem;
}

/* Desktop Styles */
@media (min-width: 992px) {
  .desktop-phone {
    display: flex;
  }
  
  .logo-text-group {
    gap: 0;
  }
  
  .company-name {
    white-space: nowrap;
  }
}

/* Shrunk State */
.main-nav.shrink {
  padding: 5px 0;
  box-shadow: 0 2px 15px rgba(0,0,0,0.1);
}

.main-nav.shrink .logo-img {
  height: 100px;
}

.main-nav.shrink .company-name {
  font-size: 1rem;
}

.main-nav.shrink .highlight-word {
  font-size: 1rem;
}

.main-nav.shrink .desktop-phone {
  font-size: 0.8rem;
}

.main-nav.shrink .desktop-phone i {
  font-size: 1rem;
}

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

.nav-links a {
  font-weight: 500;
  transition: color 0.3s;
}

.nav-links a:hover {
  color: var(--green);
}

.nav-cta {
  background-color: var(--lime);
  color: var(--dark-gray);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-weight: 600;
  transition: all 0.3s;
}

.nav-cta:hover {
  background-color: var(--lime);
  color: var(--white);
}

/* Enhanced Fast Quote Button */
.fast-quote-btn {
  position: relative;
  overflow: hidden;
}

.fast-quote-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.6s ease;
}

.fast-quote-btn:hover::before {
  left: 100%;
}

/* Hero Section */
.hero {
  background: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.5)), url('images/pexels-photo-4176541.jpeg') no-repeat center center/cover; 
  background-color: var(--green);
  color: var(--white);
  min-height: 100vh;
  display: flex;
  align-items: center;
  text-align: center;
  position: relative;
  margin-top: 80px;
}

.hero-overlay {
  width: 100%;
  padding: 2rem;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
}

.hero h1 {
  font-size: 3.5rem;
  margin-bottom: 1.5rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.hero p {
  font-size: 1.5rem;
  margin-bottom: 2.5rem;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Buttons */
.btn {
  display: inline-block;
  background-color: var(--lime);
  color: var(--dark-gray);
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
  text-align: center;
  transition: all 0.3s;
  border: none;
  cursor: pointer;
}

.btn:hover {
  background-color: var(--blue);
  color: var(--white);
  transform: translateY(-2px);
}

.btn.secondary {
  background-color: transparent;
  color: var(--white);
  border: 2px solid var(--white);
}

.btn.secondary:hover {
  background-color: var(--white);
  color: var(--dark-gray);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* About Section */
.about {
  padding: 5rem 0;
  background-color: var(--white);
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.about-content p {
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.feature {
  background-color: var(--light-gray);
  padding: 1.5rem;
  border-radius: 8px;
  text-align: center;
  transition: transform 0.3s;
}

.feature:hover {
  transform: translateY(-5px);
}

.feature i {
  font-size: 2rem;
  color: var(--green);
  margin-bottom: 1rem;
}

.feature h4 {
  font-size: 1.1rem;
}

/*.about-image {
  position: relative;
  height: 400px;
} */


/* Styles for the new team grid */
.about-team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Creates 2 columns */
  grid-template-rows: repeat(2, 1fr);    /* Creates 2 rows */
  gap: 1.5rem; /* Space between the images */
  width: 100%; /* Takes full width of its parent */
  height: 100%; /* Fills the height of its parent */
  align-items: center; /* Center items in their grid cells */
  justify-content: center; /* Center items horizontally in their grid cells */
}

.team-img {
  width: 100%; /* Each image takes full width of its grid cell */
  height: 180px; /* Fixed height for consistent image size */
  object-fit: cover; /* Ensures image covers the area, cropping as needed */
  border-radius: 8px; /* Consistent rounded corners */
  box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Subtle shadow */
  transition: transform 0.3s ease; /* Smooth hover effect */
}

.team-img:hover {
  transform: scale(1.05); /* Slight zoom on hover */
}

/* Adjust the .about-image parent container if needed */
.about-image {
  /* You can keep or remove this height based on how it looks.
     If you want the image grid to define its own height, remove it.
     If you want the grid to fit into a specific overall height, keep it. */
  height: 400px; /* Keep this if you want fixed overall height */
}

/* Mobile responsiveness for the team grid */
@media (max-width: 768px) {
  .about-team-grid {
    gap: 1rem;
  }
  .team-img {
    height: 150px; /* Smaller height for images on tablets/smaller screens */
  }
}

@media (max-width: 480px) {
  .about-team-grid {
    grid-template-columns: 1fr; /* Stack images vertically on very small screens */
    grid-template-rows: auto;
  }
  .team-img {
    height: 200px; /* Give more height for single column images */
  }
}



/* About image styling */
.about-img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.about-img:hover {
  transform: scale(1.02);
}

/* Family Story Styling */
.family-story {
  background-color: var(--light-gray);
  padding: 2rem;
  border-radius: 8px;
  margin: 2rem 0;
  border-left: 4px solid var(--green);
}

.family-story h3 {
  color: var(--green);
  margin-bottom: 1rem;
}

/* Testimonial Styling */
.testimonial-highlight {
  background-color: var(--green);
  color: var(--white);
  padding: 3rem 2rem;
  margin-top: 3rem;
  border-radius: 8px;
  text-align: center;
  position: relative;
}

.testimonial-highlight blockquote {
  font-size: 1.3rem;
  font-style: italic;
  margin: 0 0 1rem;
  position: relative;
}

.testimonial-highlight blockquote::before {
  content: '"';
  font-size: 4rem;
  position: absolute;
  left: -2rem;
  top: -1rem;
  opacity: 0.3;
}

.testimonial-highlight cite {
  font-weight: 600;
  font-size: 1rem;
}

/* Services Section */
.services {
  padding: 5rem 0;
  background-color: var(--green);
}

.services h2 {
  text-align: center;
  color: var(--white);
  font-size: 2.5rem;
}

.services .section-subtitle {
  color: var(--white);
  text-align: center;
}

/* Services Section Grid - UPDATED for 3 columns on desktop and reordered content */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Force 3 equal columns on desktop */
  gap: 2rem;
  /* Optional: Center the grid itself if it's not taking full width */
  justify-items: center; /* Centers each item within its grid cell if it doesn't span full width */
}

/* Specific styling for the commercial service card to center it on desktop */
.commercial-service-card {
  grid-column: 2; /* Forces this item to start in the 2nd column */
}

/* Responsive adjustments for the services grid */
@media (max-width: 992px) { /* Adjust breakpoint if 3 columns become too tight earlier */
    .services-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for tablets */
    }
    /* Reset the commercial card's column on smaller screens so it flows normally */
    .commercial-service-card {
        grid-column: auto;
    }
}

@media (max-width: 600px) { /* Smaller tablet/large phone breakpoint */
    .services-grid {
        grid-template-columns: 1fr; /* 1 column for small phones */
    }
    /* Ensure it flows normally on mobile too */
    .commercial-service-card {
        grid-column: auto;
    }
}

@media (max-width: 480px) { /* Mobile breakpoint (already existing) */
    .services-grid {
        grid-template-columns: 1fr; /* 1 column for small phones */
    }
}

.service-card {
  background: var(--white);
  border-radius: 8px;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: all 0.3s;
  text-align: center;
}

.service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.service-card i {
  font-size: 2.5rem;
  color: var(--green);
  margin-bottom: 1.5rem;
}

.service-card h3 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: var(--dark-gray);
}

.service-card p {
  color: var(--dark-gray);
  font-size: 1rem;
}

/* Trust Signals Section - UPDATED for 3 items */
.trust-signals {
  padding: 3rem 0;
  background-color: var(--light-gray);
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Forces 2 columns for a 2x2 layout */
  grid-template-rows: repeat(2, auto); /* Allows rows to size content, will work for 2x2 */
  gap: 2rem;
  max-width: 1000px; /* Keep max-width */
  margin: 0 auto; /* Centers the grid */
  align-items: start; /* Align items to the start of their grid cells */
  justify-content: center; /* Centers the grid within its container */
}

/* No need for specific nth-child positioning anymore with 3 columns */

/* Existing .trust-item styles remain the same: */
.trust-item {
  background-color: var(--white);
  padding: 2rem 1.5rem;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  border-left: 4px solid var(--green);
}

.trust-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0,0,0,0.15);
  border-left-color: var(--lime);
}

.trust-item i {
  font-size: 2.5rem;
  color: var(--green);
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.trust-item:hover i {
  color: var(--dark-green);
  transform: scale(1.1);
}

.trust-item span {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--dark-gray);
  line-height: 1.3;
}

/* Mobile responsiveness - REVERTED for 4 items */
@media (max-width: 768px) { /* This breakpoint handles tablets/smaller desktop */
  .trust-grid {
    grid-template-columns: repeat(2, 1fr); /* Maintain 2 columns on tablets */
    gap: 1.5rem;
  }
  
  .trust-item {
    padding: 1.5rem 1rem;
  }
  
  .trust-item i {
    font-size: 2rem;
    margin-bottom: 0.75rem;
  }
  
  .trust-item span {
    font-size: 1rem;
  }
}

@media (max-width: 480px) { /* Small phone breakpoint */
  .trust-grid {
    grid-template-columns: 1fr; /* Stack items vertically on very small screens */
  }
}

/* FAQ Section */
.faq {
  padding: 5rem 0;
  background-color: var(--white);
}

.faq h2 {
  text-align: center;
  color: var(--green);
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.faq-container {
  max-width: 800px;
  margin: 0 auto;
}

.faq-item {
  background-color: var(--light-gray);
  border-radius: 8px;
  margin-bottom: 1rem;
  overflow: hidden;
  transition: all 0.3s ease;
  border-left: 4px solid var(--green);
}

.faq-item:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.faq-question {
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: var(--light-gray);
}

.faq-question:hover {
  background-color: #d1d2d3;
}

.faq-item.active .faq-question {
  background-color: var(--green);
  color: var(--white);
}

.faq-question i:first-child {
  font-size: 1.2rem;
  color: var(--green);
  width: 20px;
  text-align: center;
}

.faq-item.active .faq-question i:first-child {
  color: var(--white);
}

.faq-question span {
  flex: 1;
  font-weight: 600;
  font-size: 1.1rem;
}

.faq-arrow {
  font-size: 0.9rem;
  color: var(--green);
  transition: transform 0.3s ease;
}

.faq-item.active .faq-arrow {
  transform: rotate(180deg);
  color: var(--white);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background-color: var(--white);
}

.faq-item.active .faq-answer {
  max-height: 300px;
}

.faq-answer p {
  padding: 1.5rem;
  margin: 0;
  color: var(--dark-gray);
  line-height: 1.6;
}

/* Areas Section */
.areas {
  padding: 5rem 0;
  background-color: var(--white);
}

.areas h2 {
  text-align: center;
  color: var(--green);
  font-size: 2.5rem;
}

/* Areas Section Grid (Primary focus) - UPDATED to center items*/
.areas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  justify-content: center; /* This will center your 10 tiles nicely */
  margin-bottom: 4rem; /* Adds space before the detailed list */
}

.area-card {
  background-color: var(--light-gray);
  padding: 1.5rem;
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s;
}

.area-card:hover {
  background-color: var(--green);
  color: var(--white);
}

.area-card i {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--green);
}

.area-card:hover i {
  color: var(--white);
}

.area-card h4 {
  font-size: 1.1rem;
}

.areas-note {
  text-align: center;
  margin-top: 2rem;
  font-style: italic;
}

/* Detailed Areas Section */
.detailed-areas {
  background-color: var(--white);
  padding: 3rem 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  margin-top: 3rem; /* Space above this section */
}

.detailed-areas h3 {
  text-align: center;
  color: var(--green);
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

.detailed-areas-intro {
  text-align: center;
  margin-bottom: 2rem;
  font-style: italic;
  color: var(--dark-gray);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.detailed-areas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 3-4 columns on desktop, adapts */
  gap: 2.5rem;
  margin-top: 2rem;
}

.area-group h4 {
  color: var(--dark-green);
  font-size: 1.25rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--lime);
  padding-bottom: 0.5rem;
}

.area-group ul {
  list-style: none; /* Remove default bullet points */
  padding: 0;
  margin: 0;
}

.area-group ul li {
  margin-bottom: 0.5rem;
  font-size: 1rem;
  color: var(--dark-gray);
  display: flex;
  align-items: center;
}

.area-group ul li::before {
  content: '•'; /* Custom bullet point */
  color: var(--lime);
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}

/* Mobile Responsiveness for Detailed Areas Section */
@media (max-width: 768px) {
  /* Keep existing areas-grid rules for 2 columns */
  .detailed-areas {
    padding: 2rem 1rem;
  }
  
  .detailed-areas h3 {
    font-size: 2rem;
  }

  .detailed-areas-grid {
    grid-template-columns: 1fr; /* Stack detailed lists on mobile */
  }

  .area-group h4 {
    font-size: 1.15rem;
  }
}

@media (max-width: 480px) {
  /* Keep existing areas-grid rules for 1 column */
}

/* Contact Section */
.contact {
  padding: 5rem 0;
  background-color: var(--light-gray);
}

.contact h2 {
  text-align: center;
  color: var(--green);
  font-size: 2.5rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.contact-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-self: center;
}

.info-card {
  background-color: var(--white);
  padding: 1.5rem;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.info-card i {
  font-size: 2rem;
  color: var(--green);
  margin-bottom: 1rem;
}

.info-card h4 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.info-card a {
  display: block;
  margin: 0.25rem 0;
  color: var(--blue);
  font-weight: 500;
  transition: color 0.3s;
}

.info-card a:hover {
  color: var(--green);
}

.info-card p {
  margin: 0.5rem 0;
  color: var(--dark-gray);
}

.contact-form {
  position: relative;
  background-color: var(--white);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.contact-form::before {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  background-color: var(--green);
  margin: 0 auto 2rem;
  border-radius: 2px;
}

/* Contact form spotlight effect */
.contact-form.spotlight {
  animation: spotlight 2s ease-out;
  transform: scale(1.02);
  box-shadow: 0 0 30px rgba(38, 133, 76, 0.3);
}

@keyframes spotlight {
  0% {
    box-shadow: 0 0 0 rgba(38, 133, 76, 0);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 40px rgba(38, 133, 76, 0.5);
    transform: scale(1.02);
  }
  100% {
    box-shadow: 0 0 30px rgba(38, 133, 76, 0.3);
    transform: scale(1.02);
  }
}

.contact-form.spotlight::after {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 2px solid var(--green);
  border-radius: 12px;
  opacity: 0;
  animation: pulse-border 1s ease-out 1s;
}

@keyframes pulse-border {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.05);
  }
}

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

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--light-gray);
  border-radius: 4px;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(38, 133, 76, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

/* Enhanced WhatsApp Widget */
.whatsapp-widget {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1000;
  transition: all 0.4s ease;
}

.whatsapp-float {
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: white;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
  transition: all 0.3s ease;
  text-decoration: none;
  position: relative;
  animation: whatsappFloat 3s ease-in-out infinite;
  transform: scale(1);
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 25px rgba(37, 211, 102, 0.6);
  animation: none;
}

@keyframes whatsappFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.whatsapp-pulse {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgba(37, 211, 102, 0.3);
  animation: whatsappPulse 2s infinite;
  pointer-events: none;
}

@keyframes whatsappPulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

.whatsapp-message {
  position: absolute;
  bottom: 70px;
  right: 0;
  opacity: 0;
  transform: translateY(20px) scale(0.8);
  transition: all 0.3s ease;
  pointer-events: none;
}

.whatsapp-message.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

.message-bubble {
  background-color: var(--white);
  color: var(--dark-gray);
  padding: 1rem 1.5rem;
  border-radius: 20px 20px 5px 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  position: relative;
  white-space: nowrap;
  max-width: 250px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
}

.message-bubble::after {
  content: '';
  position: absolute;
  bottom: -8px;
  right: 15px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid var(--white);
}

.close-message {
  background: none;
  border: none;
  color: var(--dark-gray);
  font-size: 1.2rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.3s ease;
  padding: 0;
  margin-left: auto;
}

.close-message:hover {
  opacity: 1;
}

.whatsapp-widget.scrolled {
  bottom: 50%;
  right: 1rem;
  transform: translateY(50%);
}

.whatsapp-widget.scrolled .whatsapp-float:hover {
  transform: scale(1.1);
}

/* Footer */
.main-footer {
  background-color: var(--dark-gray);
  color: var(--light-gray);
  padding: 3rem 0 0;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.footer-about h3 {
  color: var(--white);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.footer-links h4, .footer-contact h4 {
  color: var(--white);
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
}

.footer-links a {
  display: block;
  margin-bottom: 0.5rem;
  transition: color 0.3s;
}

.footer-links a:hover {
  color: var(--lime);
}

.footer-contact p {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-contact i {
  width: 20px;
}

.footer-bottom {
  text-align: center;
  padding: 1.5rem;
  margin-top: 2rem;
  background-color: rgba(0,0,0,0.2);
}

/* Emergency Banner */
.emergency-banner {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: white;
  padding: 0.75rem 0;
  text-align: center;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1001;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  animation: slideDown 0.5s ease-out;
}

.emergency-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  position: relative;
}

.emergency-text {
  font-weight: 600;
  font-size: 1rem;
}

.emergency-phone {
  background-color: white;
  color: #e74c3c;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-weight: 700;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  text-decoration: none;
}

.emergency-phone:hover {
  background-color: #f8f9fa;
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.emergency-close {
  background: none;
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  position: absolute;
  right: 1rem;
  padding: 0.25rem;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.emergency-close:hover {
  background-color: rgba(255,255,255,0.2);
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

body:not(.banner-hidden) .main-nav {
  top: 50px;
}

body:not(.banner-hidden) .hero {
  margin-top: 130px;
}

body.banner-hidden .emergency-banner {
  transform: translateY(-100%);
}

/* Enhanced notifications */
.notification {
  position: fixed;
  top: 100px;
  right: -300px;
  background: var(--green);
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  z-index: 1001;
  max-width: 300px;
}

.notification.show {
  right: 20px;
}

.notification-success {
  background: var(--green);
}

.notification-error {
  background: #e74c3c;
}

/* Responsive */
@media (max-width: 768px) {
  .nav-container {
    flex-direction: column;
    padding: 1rem;
  }

  .logo-text {
    display: none;
  }
    
  .logo-img {
    height: 80px !important;
  }
    
  .main-nav.shrink .logo-img {
    height: 22px !important;
  }
  
  .nav-links {
    margin-top: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
  
  .hero h1 {
    font-size: 2.5rem;
  }
  
  .hero p {
    font-size: 1.2rem;
  }
  
  .about-grid, .contact-grid {
    grid-template-columns: 1fr;
  }
  
  .contact-info {
    grid-template-columns: 1fr;
  }
  
  .features-grid {
    grid-template-columns: 1fr 1fr;
  }

  .trust-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  
  .trust-item:nth-child(1),
  .trust-item:nth-child(2),
  .trust-item:nth-child(3),
  .trust-item:nth-child(4) {
    grid-column: 1;
    grid-row: auto;
  }
  
  .trust-item {
    padding: 1.5rem 1rem;
  }
  
  .trust-item i {
    font-size: 2rem;
    margin-bottom: 0.75rem;
  }
  
  .trust-item span {
    font-size: 1rem;
  }

  .faq-question {
    padding: 1rem;
  }
  
  .faq-question span {
    font-size: 1rem;
  }
  
  .faq-answer p {
    padding: 1rem;
  }

  .whatsapp-widget {
    bottom: 1rem;
    right: 1rem;
  }
  
  .whatsapp-float {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
  }
  
  .message-bubble {
    max-width: 200px;
    font-size: 0.8rem;
    padding: 0.75rem 1rem;
  }
  
  .whatsapp-message {
    bottom: 60px;
  }
  
  .whatsapp-widget.scrolled {
    bottom: 1rem;
    right: 1rem;
    transform: none;
  }

  .notification {
    right: -250px;
    max-width: 250px;
  }
  
  .notification.show {
    right: 15px;
  }

  .emergency-content {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 2rem;
  }
  
  .emergency-text {
    font-size: 0.9rem;
  }
  
  .emergency-phone {
    font-size: 1rem;
    padding: 0.4rem 0.8rem;
  }
  
  .emergency-close {
    top: 0.5rem;
    right: 0.5rem;
  }
}

@media (max-width: 480px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .hero-buttons {
    flex-direction: column;
    gap: 1rem;
  }
  
  .btn {
    width: 100%;
  }

  .trust-grid {
    grid-template-columns: 1fr;
  }
}

/* Quick Questions Widget */
.quick-questions {
  background: linear-gradient(135deg, var(--green), var(--dark-green));
  color: var(--white);
  padding: 2.5rem 2rem;
  border-radius: 12px;
  margin-bottom: 3rem;
  text-align: center;
}

.quick-questions h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.quick-questions p {
  opacity: 0.9;
  margin-bottom: 2rem;
}

.questions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  max-width: 800px;
  margin: 0 auto;
}

.question-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--white);
  padding: 1.5rem 1rem;
  border-radius: 10px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  transition: all 0.3s ease;
  cursor: pointer;
}

.question-card:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-3px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.question-card.emergency {
  background: rgba(231, 76, 60, 0.3);
  border-color: #e74c3c;
  animation: emergencyPulse 2s infinite;
}

@keyframes emergencyPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(231, 76, 60, 0.4); }
  50% { box-shadow: 0 0 20px rgba(231, 76, 60, 0.8); }
}

.question-card i {
  font-size: 1.5rem;
}

.question-card span {
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
  line-height: 1.2;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .questions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .quick-questions {
    padding: 2rem 1rem;
  }
  
  .question-card {
    padding: 1rem 0.75rem;
  }
  
  .question-card span {
    font-size: 0.85rem;
  }
}

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