/* Despre Noi Card */
.hero {
    position: relative;
    width: 100%;
    height: 500px;
    /* Fixed height for the hero section */
    overflow: hidden;
}

.hero video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    transform: translate(-50%, -50%);
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Semi-transparent black */
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    color: white;
    text-align: center;
    padding: 100px 0;
}

.card {
    transition: transform 0.2s ease;
    /* Smaller hover effect */
}

.card:hover {
    transform: scale(1.02);
    /* Less dramatic scale */
}

.card.bg-light-blue {
    background-color: #cce5ff; /* Fundal bleu pentru cardul "Despre Noi" */
    color: #000; /* Textul să fie de culoare neagră pentru contrast */
}

/* Avantajele Aplicațiilor Noastre Card */
.bg-light-green {
    background-color: #d4edda; /* Fundal verde pentru cardul "Avantajele Aplicațiilor Noastre" */
    padding: 20px; /* Spațiu în jurul textului */
    border-radius: 10px; /* Colțuri rotunjite */
}

.bg-light-green ul {
    padding-left: 0; /* Elimină padding-ul implicit pentru listă */
}

.bg-light-green ul li {
    list-style: none; /* Elimină marcatorii standard */
    padding-left: 0; /* Elimină padding-ul implicit */
    margin-bottom: 10px; /* Spațiu între elementele listei */
    font-size: 16px; /* Dimensiunea textului */
}

.bg-light-green ul li i {
    color: #28a745; /* Verde pentru bifa */
    margin-right: 10px; /* Spațiu între bifa și text */
}

.hero video {
    width: 100%; /* Asigură că video-ul se extinde pe lățimea completă */
    height: auto; /* Își menține proporțiile */
    object-fit: cover; /* Asigură că video-ul acoperă întreaga zonă */
}

.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff; /* Text alb pentru contrast pe fundalul video-ului */
    text-align: center; /* Centrează textul */
    z-index: 2; /* Asigură că textul este deasupra overlay-ului */
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Overlay semi-transparent */
    z-index: 1; /* Asigură că overlay-ul este sub textul din hero */
}