/* Lightbox */
.lightbox {
  display: none; /* ascuns inițial */
  position: fixed;
  z-index: 9999;
  padding-top: 60px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
}

.lightbox-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 80%;
  animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.close {
  position: absolute;
  top: 20px;
  right: 40px;
  color: white;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s;
}

.close:hover {
  color: #ccc;
}
.servicii-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* trei pe rând */
  gap: 20px;
  justify-items: center;
   padding-top: 40px;
}

.card {
  position: relative;
  width: 100%;
  max-width: 350px;
  height: 320px;
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}

/* Titlu lipit jos, pe stânga */
.card h3 {
  position: absolute;
  bottom: 0; /* lipit de jos */
  left: 0;
  background: white;
  border-left: 6px solid #007BFF; /* linie albastră verticală */
  color: black;
  font-size: 20px;
  font-weight: bold;
  padding: 12px 16px;
  width: 100%; /* întinde pe toată lățimea */
  z-index: 2;
  transition: all 0.3s ease;
}

/* Overlay */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.3s ease;
  z-index: 1;
}

/* Efect hover: fundal semi-transparent + text centrat */
.card:hover::after {
  background: rgba(0, 0, 0, 0.6);
}

.card:hover h3 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  color: white;
  text-align: center;
  bottom: auto;
  width: auto; /* textul devine doar pe conținut */
}

/* Fundaluri */
.card-proiectare { background-image: url("servicii/fundal-proiectare1.png"); }
.card-executie { background-image: url("servicii/fundal-executie1.png"); }
.card-modernizare { background-image: url("servicii/fundal-modernizare1.png"); }
.card-integrare { background-image: url("servicii/fundal-integrare.png"); }
.card-mentenanta { background-image: url("servicii/fundal-mentenanta1.png"); }
.card-consultanta { background-image: url("servicii/fundal-consultanta1.png"); }
.card-design{ background-image: url("servicii/fundal-design.png"); }

/* Responsiv */
@media (max-width: 900px) {
  .servicii-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .servicii-container {
    grid-template-columns: 1fr;
  }
}

.practical-solutions {
  text-align: center;
  padding: 100px 20px;
  background: #f8f9fb;
}

.practical-solutions h2 {
  font-size: 2rem;
  margin-bottom: 40px;
}

.stacked-links {
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1300px;
  margin-bottom: 30px;
  overflow-x: auto; /* permite scroll orizontal */
  padding-bottom: 40px;
  padding-top: 40px;
}

.stacked-links a {
  display: block;
  transform: rotateY(-20deg);
  transform-origin: left center;
  margin-left: -180px; /* mai puțin negativ pentru a încăpea mai multe */
  border: 4px solid transparent;
  border-radius: 6px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.stacked-links img {
  height: 180px; /* micșorate puțin */
  border-radius: 4px;
  background: white;
  display: block;
}

.stacked-links a:first-child {
  margin-left: 0; /* primul să nu fie tăiat */
}

.stacked-links a:hover {
  transform: rotateY(-15deg) translateY(-5px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.25);
}

.solution-text {
  font-size: 1.2rem;
  padding: 15px 20px;
  display: none; /* ascuns inițial */
  border-radius: 6px;
  max-width: 700px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
html {
  scroll-behavior: smooth;
}
.heat-systems {
  padding: 60px 20px;
  background: linear-gradient(135deg, #ffffff, #ffffff);
}

.heat-systems h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
  position: relative;
  color: #e74c3c;
}

.heat-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: center;
  justify-content: center;
}

.heat-image {
  flex: 1 1 500px;
  text-align: center;
}

.heat-image img {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  transition: transform 0.4s ease;
}

.heat-image img:hover {
  transform: scale(1.03);
}

.heat-details {
  flex: 1 1 400px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.heat-step {
  background: white;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.3s ease;
}

.heat-step::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid red; /* culoarea vârfului de săgeată */
}
.heat-step:hover {
  background: #e74d3c74;
}

.heat-step span {
  flex: 1;
}
@media (max-width: 768px) {
  .heat-container {
    flex-direction: column;
  }
}
.cooling-systems {
  padding: 60px 20px;
  background: linear-gradient(135deg, #ffffff, #ffffff);
}

.cooling-systems h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
  position: relative;
  color: #3498db; /* albastru */
}

.cooling-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: center;
  justify-content: center;
}

.cooling-image {
  flex: 1 1 500px;
  text-align: center;
}

.cooling-image img {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  transition: transform 0.4s ease;
}

.cooling-image img:hover {
  transform: scale(1.03);
}

.cooling-details {
  flex: 1 1 400px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.cooling-step {
  background: white;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.3s ease;
}

.cooling-step::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #3498db; /* vârf de săgeată albastru */
}

.cooling-step:hover {
  background: rgba(52, 152, 219, 0.2); /* hover albastru transparent */
}

.cooling-step span {
  flex: 1;
}

@media (max-width: 768px) {
  .cooling-container {
    flex-direction: column;
  }
}
.ventilation-systems {
  padding: 60px 20px;
  background: linear-gradient(135deg, #ffffff, #ffffff); /* un albastru deschis, diferit de răcire */
}

.ventilation-systems h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
  position: relative;
  color: #27ae60; /* verde pentru ventilație */
}

.ventilation-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: center;
  justify-content: center;
}

.ventilation-image {
  flex: 1 1 500px;
  text-align: center;
}

.ventilation-image img {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  transition: transform 0.4s ease;
}

.ventilation-image img:hover {
  transform: scale(1.03);
}

.ventilation-details {
  flex: 1 1 400px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.ventilation-step {
  background: white;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.3s ease;
}

.ventilation-step::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #27ae60; /* săgeată verde */
}

.ventilation-step:hover {
  background: rgba(39, 174, 96, 0.2); /* hover verde transparent */
}

.ventilation-step span {
  flex: 1;
}

@media (max-width: 768px) {
  .ventilation-container {
    flex-direction: column;
  }
}
.interior-control {
  padding: 60px 20px;
  background: linear-gradient(135deg, #ffffff, #ffffff); /* degrade galben deschis */
}

.interior-control h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
  position: relative;
  color: #f1c40f; /* galben */
}

.control-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: center;
  justify-content: center;
}

.control-image {
  flex: 1 1 500px;
  text-align: center;
}

.control-image img {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  transition: transform 0.4s ease;
}

.control-image img:hover {
  transform: scale(1.03);
}

.control-details {
  flex: 1 1 400px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.control-step {
  background: white;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.3s ease;
}

.control-step::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #f1c40f; /* săgeată galbenă */
}

.control-step:hover {
  background: rgba(241, 196, 15, 0.2); /* hover galben transparent */
}

.control-step span {
  flex: 1;
}

@media (max-width: 768px) {
  .control-container {
    flex-direction: column;
  }
}
.metering-systems {
  padding: 60px 20px;
  background: linear-gradient(135deg, #ffffff, #ffffff); /* degrade mov deschis */
}

.metering-systems h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
  position: relative;
  color: #8e44ad; /* mov */
}

.metering-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: center;
  justify-content: center;
}

.metering-image {
  flex: 1 1 500px;
  text-align: center;
}

.metering-image img {
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  transition: transform 0.4s ease;
}

.metering-image img:hover {
  transform: scale(1.03);
}

.metering-details {
  flex: 1 1 400px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.metering-step {
  background: white;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.3s ease;
}

.metering-step::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #8e44ad; /* săgeată mov */
}

.metering-step:hover {
  background: rgba(142, 68, 173, 0.15); /* hover mov transparent */
}

.metering-step span {
  flex: 1;
}
.metering-step ul {
  margin: 8px 0 0 20px;
  padding: 0;
}

.metering-step ul li {
  list-style-type: disc;
}

@media (max-width: 768px) {
  .metering-container {
    flex-direction: column;
  }
}