/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
}
.carousel-item img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  filter: brightness(75%); /* Întunecă subtil poza ca să se citească textul alb mai bine */
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 8rem;                   /* Poziționat frumos pe mijlocul vertical */
  z-index: 10;
  padding: 4rem 2rem;
  width: 100%;
  left: 0;
  
  /* GRADIENTUL SUBTIL: Pornește de la 35% opacitate și se pierde total la 70% din distanță */
  background: radial-gradient(
    ellipse at center, 
    rgba(0, 0, 0, 0.4) 0%, 
    rgba(0, 0, 0, 0.1) 40%, 
    rgba(0, 0, 0, 0) 75%
  );
}

.carousel-caption h1 {
  font-weight: 800;
  letter-spacing: -1px;
  /* Umbra literelor este acum foarte blurată (30px), nu neagră tăiată */
  text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.6); 
  margin-bottom: 0.5rem;
}

.carousel-caption p {
  font-weight: 400;
  font-size: 1.25rem;
  text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}

/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.05rem;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}
@media (max-width: 576px) {
  /* Ocupă exact 60% din înălțimea ecranului oricărui telefon */
  .carousel-item {
    height: 55vh !important; 
    min-height: 380px !important; 
  }

  /* Imaginea se adaptează perfect la această înălțime */
  .carousel-item img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Caseta text se întinde pe tot ecranul și centrează conținutul */
  .carousel-caption {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; 
    align-items: center !important;
    text-align: center !important;
    background: rgba(0, 0, 0, 0.35) !important; 
  }

  /* Titlul principal (ex: Instalații Electrice...) */
  .carousel-caption h1,
  .carousel-caption .h1,
  .carousel-caption h2 {
    font-size: 1.6rem !important; 
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: 0.6rem !important;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8) !important;
  }

  /* Subtitlul / Descrierea (ex: Efectuăm lucrări...) */
  .carousel-caption p {
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    margin-bottom: 1.2rem !important;
    max-width: 95% !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8) !important;
  }

  /* Butonul „Ofertă de preț” */
  .carousel-caption .btn {
    font-size: 0.9rem !important;
    padding: 8px 22px !important;
  }
}