/* General body styles */
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  background-color: rgb(234, 226, 226); /* Adaugă această linie pentru a seta fundalul la negru */
}

/* Stilizare pentru containerul care conține titlurile */
.container-acasa {
  text-align: center; /* Centrează textul pe orizontală */
  margin-top: 0.5px; /* Spațiu de sus pentru a nu se lipi de margine */ 
}

/* Stilizare pentru h1 (titlul principal) */
h1 {
  font-size: 3rem; /* Mărimea textului pentru titlul principal */
  color: #ffffff; /* Culoarea titlului */
  margin-bottom: 10px; /* Spațiu între titlu și subtitlu */
}

/* Stilizare pentru h2 (subtitlu) */
h2.content-acasa {
  font-size: 1.5rem; /* Mărimea subtitlului */
  color: #000000; /* Culoarea subtitlului */
}

h3 {
  color: #000000;
}

.container {
  text-align: center;
  padding: 22px;
}

.desprenoi {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: #f4f4f4;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.GuvernantaCorporativa0 {
  width: 100%; /* Asigură că div-ul ocupă întreaga lățime a paginii */
  margin: 20px 0; /* Spațiu sus și jos */
  padding: 20px; /* Paddingul pentru interiorul div-ului */
  background-color: #e0e0e0; /* Culoare fundal */
  border-radius: 10px; /* Colțuri rotunjite */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Umbra pentru efect vizual */
  text-align: flex; /* Aliniază textul pe ambele margini */
}
.GuvernantaCorporativa {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: #f4f4f4;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


/* Stiluri pentru containerul conducere */
.conducere {
  max-width: 800px;
  margin: 10px auto;
  padding: 20px;
  background-color: #f4f4f4;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex; /* Asigură că containerul folosește flexbox */
  flex-direction: column; /* Aranjează elementele pe verticală */
  gap: 20px; /* Spațiu între boxuri */
  text-align: center; /* Aliniază textul la centru */
}

/* Stilizare pentru secțiunea de conducere */

.conducere h1 {
  text-align: center;
  color: #333;
}

.conducere-info ul {
  list-style-type: none;
  padding: 0;
}

.conducere-info li {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.conducere-info a {
  color: #000000;
  text-decoration: none;
}

.conducere-info a:hover {
  text-decoration: underline;
}

.conducere-info .conducere-icon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.conducere-form label {
  display: block;
  margin: 10px 0 5px;
  font-weight: bold;
}

.conducere-form input, .conducere-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
}

.conducere-form button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
}

.conducere-form button:hover {
  background-color: #0056b3;
}

/* Stiluri pentru fiecare box */
.box {
  padding: 10px;
  border-radius: 10px;
  color: white;
  font-size: 1.2rem;
}

/* Box pentru Director General */
.box.blue {
  background-color: #037dff; /* Culoare albastră */
}

/* Responsivitate pentru mobil */
@media (max-width: 768px) {
  .box {
      padding: 15px;
      font-size: 1rem;
  }
}

/* Menu styles */
.menu {
  background-color: #330066;
  padding: 10px 0;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}
.flex {
  display: flex;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
header {
  background: rgb(108, 108, 108);
}
.menu ul li {
  margin: 0 15px;
  position: relative; /* Needed for dropdown */
}

.menu ul li a {
  color: white;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
}

.menu ul li a:hover {
  color: #ffcc00;
}

/* Stil pentru meniul principal */
#menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

#menu li {
  position: relative;
  padding: 0 10px;
}

/* Adăugarea săgeții pentru meniurile care au submeniuri */
#menu li:has(> ul) > a::after {
  content: ' ▼'; /* Săgeata în jos */
  font-size: 12px;
  margin-left: 5px; /* Spațiu între text și săgeată */
}

/* Adăugarea săgeții pentru submeniurile secundare (săgeata spre dreapta) */
#menu ul li ul li:has(> ul) > a::after {
  content: ' ▶'; /* Săgeata spre dreapta pentru submeniu secundar */
  font-size: 12px;
  margin-left: 5px; /* Spațiu între text și săgeată */
}

/* Stiluri pentru legături */
#menu a {
  text-decoration: none;
  color: white;
  font-weight: bold;
}

#menu a:hover {
  color: black;
}

/* Stil pentru submeniuri */
#menu ul ul {
  display: none; /* Submeniul este ascuns implicit */
  position: absolute;
  top: 100%; /* Submeniul apare dedesubt */
  left: 0;
  background-color:  rgb(108, 108, 108);
  padding: 25px 10px 10px 10px;
  flex-direction: column;
  min-width: 200px;
}

#menu ul li:hover > ul {
  display: block; /* Afișează submeniul la hover pe elementul părinte */
}

#menu ul ul li {
  padding: 5px;
}

#menu ul ul a {
  color: white;
}

#menu ul ul a:hover {
  color: #333;
}

/* Nested submenu (second level) */
#menu ul li ul li ul {
  display: none; /* Ascunde sub-submeniul implicit */
  position: absolute;
  top: 0;
  left: 100%; /* Poziționează sub-submeniul lângă submeniu */
  background-color:  rgb(108, 108, 108);
  padding: 10px 0;
  z-index: 999; /* Asigură că sub-submeniul este pe deasupra altui conținut */
}

#menu ul li ul li:hover > ul {
  display: block; /* Afișează sub-submeniul la hover pe un element din submeniu */
}


/* Stilizează doar textul din .container-acasa pentru a fi alb */
.container-acasa {
  background-image: url('../images/locomotiva.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 400px; /* Asigură că div-ul are înălțimea dorită */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white; /* Face textul alb */
  text-align: center; /* Aliniază textul la centru */
}

 /* Containerul general pentru secțiunea textului și imaginii */
 .container.content-wrapper {
  display: flex;
  justify-content: space-between; /* Asigură distribuirea textului și imaginii */
  align-items: flex-start; /* Aliniază la începutul containerului */
  gap: 30px; /* Adaugă un spațiu între text și imagine */
  padding: 20px; /* Adăugăm padding în jurul conținutului */
}

/* Stilizarea textului */
.text-content {
  flex: 1; /* Permite textului să ocupe tot spațiul disponibil */
  text-align: center; /* Aliniază textul pe centru pe mobil */
  max-width: 100%; /* Permite textului să ocupe întreaga lățime pe mobil */
}

.content-desprenoi {
  font-size: 1.2rem; /* Mărimea textului */
  line-height: 1.6; /* Înălțimea liniei pentru o citire mai ușoară */
  margin-bottom: 20px; /* Spațiu între paragrafe */
  text-align: justify; /* Aliniem textul la ambele margini */
  text-indent: 40px; /* Adaugă alineat (spațiu de 30px la începutul fiecărui paragraf) */
}

/* Stilizarea imaginii */
.image-content img {
  width: 350px; /* Poți ajusta dimensiunea imaginii după necesitate */
  height: auto; /* Păstrează proporțiile imaginii */
  border-radius: 10px; /* Oferă un efect de colțuri rotunjite imaginii */
}

/* Responsivitate pentru mobil */
@media (max-width: 768px) {
  .container.content-wrapper {
      flex-direction: column; /* Pe ecrane mici, textul și imaginea sunt pe coloane */
      align-items: center; /* Centrează conținutul pe mobil */
  }

  .image-content img {
      width: 100%; /* Imaginea va ocupa 100% din lățimea containerului pe mobil */
  }

  .text-content {
      text-align: center; /* Aliniază textul pe centru pe mobil */
      max-width: 100%; /* Permite textului să ocupe întreaga lățime pe mobil */
  }
}

/* Stilizare pentru secțiunea de contact */
.contact {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: #f4f4f4;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.contact h1 {
  text-align: center;
  color: #333;
}

.contact-info ul {
  list-style-type: none;
  padding: 0;
}

.contact-info li {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.contact-info a {
  color: #007bff;
  text-decoration: none;
}

.contact-info a:hover {
  text-decoration: underline;
}

.contact-info .contact-icon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.contact-form label {
  display: block;
  margin: 10px 0 5px;
  font-weight: bold;
}

.contact-form input, .contact-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
}

.contact-form button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
}

.contact-form button:hover {
  background-color: #0056b3;
}

footer {
  text-align: center;
  padding: 20px;
  background: rgb(108, 108, 108);
  color: white;
}