/* Features Section Styling */

.features {
  background-color: #fff;
  position: relative;
}

.features-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.feature-card {
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: all 0.3s ease;
}

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

.feature-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.feature-icon.solar {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23008080'%3E%3Cpath d='M3.55 19.09l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8zM11 23h2v-2.95h-2V23zM4 11.05H1v2h3v-2zm11-4.19V2.05H9v4.81C7.21 7.9 6 9.83 6 12.05c0 3.31 2.69 6 6 6s6-2.69 6-6c0-2.22-1.21-4.15-3-5.19zm5 4.19v2h3v-2h-3zm-2.76 7.66l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4z'/%3E%3C/svg%3E");
}

.feature-icon.garden {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23008080'%3E%3Cpath d='M12 22c4.97 0 9-4.03 9-9-4.97 0-9 4.03-9 9zM5.6 10.25c0 1.38 1.12 2.5 2.5 2.5.53 0 1.01-.16 1.42-.44l-.02.19c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5l-.02-.19c.4.28.89.44 1.42.44 1.38 0 2.5-1.12 2.5-2.5 0-1-.59-1.85-1.43-2.25.84-.4 1.43-1.25 1.43-2.25 0-1.38-1.12-2.5-2.5-2.5-.53 0-1.01.16-1.42.44l.02-.19C14.5 2.12 13.38 1 12 1S9.5 2.12 9.5 3.5l.02.19c-.4-.28-.89-.44-1.42-.44-1.38 0-2.5 1.12-2.5 2.5 0 1 .59 1.85 1.43 2.25-.84.4-1.43 1.25-1.43 2.25zM12 5.5c1.38 0 2.5 1.12 2.5 2.5s-1.12 2.5-2.5 2.5S9.5 9.38 9.5 8s1.12-2.5 2.5-2.5zM3 13c0 4.97 4.03 9 9 9 0-4.97-4.03-9-9-9z'/%3E%3C/svg%3E");
}

.feature-icon.dining {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23008080'%3E%3Cpath d='M11 9H9V2H7v7H5V2H3v7c0 2.12 1.66 3.84 3.75 3.97V22h2.5v-9.03C11.34 12.84 13 11.12 13 9V2h-2v7zm5-3v8h2.5v8H21V2c-2.76 0-5 2.24-5 4z'/%3E%3C/svg%3E");
}

.feature-icon.water {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23008080'%3E%3Cpath d='M12 2c-5.33 4.55-8 8.48-8 11.8 0 4.98 3.8 8.2 8 8.2s8-3.22 8-8.2c0-3.32-2.67-7.25-8-11.8zM7.83 14c.37 0 .67.26.74.62.41 2.22 2.28 2.98 3.64 2.87.43-.02.79.32.79.75 0 .4-.32.73-.72.75-2.13.13-4.62-1.09-5.19-4.12-.08-.45.28-.87.74-.87z'/%3E%3C/svg%3E");
}

.feature-card h3 {
  margin-bottom: 15px;
  color: #008080;
  font-size: 1.5rem;
}

.feature-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
}

/* Rooftop section */
.rooftop {
  background-color: #f9f9f9;
  position: relative;
  padding-top: 40px;
  overflow: hidden;
}

.rooftop-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.rooftop-content {
  display: flex;
  gap: 50px;
  align-items: center;
  margin-bottom: 60px;
}

.rooftop-text {
  flex: 1;
}

.rooftop-text p {
  margin-bottom: 20px;
  font-size: 1.05rem;
  line-height: 1.7;
}

.rooftop-image {
  flex: 1;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  transform: translateX(20px) rotate(2deg);
}

.rooftop-image img {
  display: block;
  width: 100%;
  height: auto;
}

.rooftop-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.rooftop-feature {
  position: relative;
  padding: 30px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.rooftop-feature:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.feature-number {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  line-height: 1;
  color: rgba(0, 128, 128, 0.1);
  position: absolute;
  top: 20px;
  right: 20px;
}

.rooftop-feature h3 {
  margin-bottom: 15px;
  color: #008080;
  font-size: 1.3rem;
  position: relative;
  z-index: 1;
}

.rooftop-feature p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
  position: relative;
  z-index: 1;
}

/* Responsive styles */
@media (max-width: 900px) {
  .rooftop-content {
    flex-direction: column-reverse;
    margin-bottom: 40px;
  }
  
  .rooftop-image {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    transform: none;
  }
}

@media (max-width: 600px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .rooftop-features {
    grid-template-columns: 1fr;
  }
}