:root{
  --primary-color: #ff0000;
  --secondary-color: #d32f2f;
;
}

  /* Stiluri personalizate pentru formular */
  .form-label {
    color: #000; /* Culoare roșie pentru etichete */
    text-transform: uppercase;
  }

  .form-control {
    border-color: #000; /* Bordura câmpurilor de input și textarea */
  }

  .form-control:focus {
    border-color: #000; /* Bordura câmpurilor când sunt focusate */
    box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.25); /* Umbra roșie când câmpul este activ */
  }

.hidden {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.slideInLeft, .slideInRight {
    opacity: 1;
    visibility: visible;
}

  .btn-primary {
    color: #fff !important;
    text-transform: uppercase;
    font-weight: bold;
  }

  .btn-primary i {
    color: #fff !important;
    font-size: 1.2rem !important;
  }

  .btn-primary:hover {
    color: #fff !important;
  }

  .btn-primary:focus, .btn-primary.focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.5); /* Umbra mai puternică pentru buton */
  }

.table-transparent td, th, tr {
    background-color: transparent !important; 
    cursor: default;
}

/* ========== 1. Stiluri generale ========== */
html, body {
  overflow-x: hidden;
  height: 100%;
}

body {
  font-family: "Poppins", sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  font-size: 1rem;
}

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("/assets/img/pattern/qbkls.webp") repeat;
  opacity: 0.3;
  pointer-events: none; /* Nu interferează cu interacțiunile utilizatorului */
  z-index: 0; /* Plasează imaginea sub conținutul paginii */
}

.navbar-brand {
  font-weight: bold;
}

.primary {
  color: #ff0000;
}

.secondary {
  color: #d32f2f;
}

/* ========== 2. Stiluri pentru iconițele sociale ========== */
.social-icons a {
  color: #000;
  font-size: 15px;
  text-decoration: none;
  padding-left: 5px;
  padding-right: 5px;
}

.social-icons a:hover {
  color: var(--secondary-color); /* Exemplu de culoare pentru hover (Telegram) */
  transform: scale(1.3);
}

/* Culoare pentru Facebook */
.social-icons a[aria-label="Facebook"]:hover {
  color: #3b5998; /* Culoare albastru Facebook */
}

/* Culoare pentru Telegram */
.social-icons a[aria-label="Telegram"]:hover {
  color: #0088cc; /* Culoare albastru Telegram */
}

/* Culoare pentru Discord */
.social-icons a[aria-label="Discord"]:hover {
  color: #7289da; /* Culoare albastru Discord */
}

/* Culoare pentru X (Twitter) */
.social-icons a[aria-label="X"]:hover {
  color: #75bc4f; /* Culoare verde pentru X (fostul Twitter) */
}

/* Culoare pentru Instagram */
.social-icons a[aria-label="Instagram"]:hover {
  color: #e4405f; /* Culoare roz Instagram */
}

/* Culoare pentru LinkedIn */
.social-icons a[aria-label="LinkedIn"]:hover {
  color: #0077b5; /* Culoare albastru LinkedIn */
}

.social-icons a[aria-label="TeamViewer"]:hover {
  color: #0e8ee6; /* Culoare albastră TeamViewer */
}

/* Culoare pentru WhatsApp */
.social-icons a[aria-label="WhatsApp"]:hover {
  color: #25d366; /* Culoare verde WhatsApp */
}

/* Culoare pentru Pinterest */
.social-icons a[aria-label="Pinterest"]:hover {
  color: #e60023; /* Culoare roșu Pinterest */
}

/* Culoare pentru YouTube */
.social-icons a[aria-label="YouTube"]:hover {
  color: #ff0000; /* Culoare roșu YouTube */
}

.social-icons a[aria-label="Email"]:hover {
  color: #007bff; /* Culoare albastră pentru hover (poți schimba cu orice culoare dorești) */
}

/* ========== 3. Stiluri pentru header și butoane ========== */
header {
  background-size: cover;
  color: white;
  text-align: center;
  padding-top: 120px;
  padding-bottom: 200px;
  padding-left: 20px;
  padding-right: 20px;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
  position: relative;
}

header h1 {
  font-size: 4rem;
  font-weight: bold;
}

header p {
  font-size: 1.25rem;
  font-weight: 300;
}

header .btn {
  background-color: #ffffff;
  border-radius: 50px;
  padding: 10px 30px;
  font-size: 1.1rem;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}

.btn {
    background-color: #ffffff;
    border-radius: 50px;
    padding: 10px 30px;
    font-size: 1.1rem;
    transition:
      transform 0.3s,
      box-shadow 0.3s;
}
header .btn:hover {
  transform: translateY(-5px);
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
  background-color: #75bc4f;
  color: white;
}

/* TOP BAR */


.top-bar {
background-image: url('../img/pattern/topbar-bg.jpg');
padding: 10px 10px;
width: 100%;
color: #222222;
text-transform: uppercase;
letter-spacing: 1px;
z-index: 999999999999999;
}

/* Stilizare generală pentru top bar */
.top-bar {
  background-color: #333; /* Fundal întunecat */
  padding: 10px 0; /* Spatiu pe verticală */
  color: #fff; /* Culoare text alb */
  font-size: 14px; /* Dimensiune text generală */
}

/* Definirea stilurilor pentru lista de itemi */
.top-bar .list-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; /* Aranjare orizontală */
  flex-wrap: wrap; /* Permite să se potrivească pe ecran la dimensiuni mici */
  align-items: center; /* Centrarea pe verticală a elementelor */
  text-align: center;;
}

.dropdown-language {
  position: relative;
  display: inline-block;
}

.dropdown-language-button {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.dropdown-language-content {
  display: none;
  position: absolute;
  background-color: black;
  min-width: 50px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 10000000000000000000000000;
  top: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.dropdown-language-content a {
  color: black;
  padding: 8px 16px;
  text-decoration: none;
  display: flex;
  align-items: center;
}

.dropdown-language-content a:hover {
  background-color: #ddd;
}

.dropdown-language-content img {
  width: 20px;
  height: 15px;
  margin-right: 8px;
}
/* Stil pentru fiecare element din lista */
.top-bar .list-items li {
  margin-right: 20px; /* Spațiu între elemente */
  font-size: 10px; /* Dimensiune text */
}

/* Iconițele din listă */
.top-bar .list-items li i {
  margin-right: 8px; /* Spațiu între iconiță și text */
}

/* Textul din link-uri */
.top-bar .list-items li a {
  color: #fff; /* Text alb */
  text-decoration: none; /* Elimină sublinierea */
  font-weight: 600; /* Font îngroșat */
  display: inline-flex; /* Permite alinirea textului cu iconițele */
  align-items: center;
}

/* Modificare culoare la hover */
.top-bar .list-items li a:hover {
  color: #ff6b6b; /* Culoare de hover (roșu deschis) */
}

/* Ascunderea textului pe ecrane mici */
.hidden-xs {
  display: none;
}

/* Pe ecrane medii și mari, arătăm textul complet */
@media (min-width: 768px) {
  .hidden-xs {
      display: inline; /* Afișează textul complet pe ecrane medii și mari */
  }
}

@media (max-width: 768px) {
    .arrows {
      transform: rotate(90deg);  /* Rotește imaginea cu 90 de grade */
    }
  }
  


/* ========== 4. Navigație Sticky ========== */
.fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.navbar {
  position: absolute;
  width: 100%;
  background: repeating-linear-gradient(
    135deg,
    #000000 0%,
    #d32f2f 30%,
    #ff0000 80%,
    #ff0000 100%
  ); /* Gradient complex cu culori alternate */
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar .nav-link {
  color: white;
  font-weight: bold;
  padding: 10px 20px;
  transition: color 0.3s;
  text-transform: uppercase;
}

.nav-active {
  position: relative;
  color: #ff6b6b !important;
  text-shadow: 1px 1px 1px #5A0000;
}

.nav-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%) scaleX(1);
  transform-origin: center;
  width: 40%;
  height: 3px;
  background: radial-gradient(ellipse at center, #ff6b6b 0%, transparent 70%);
  border-radius: 5px;
  opacity: 0;
  animation: underlineFade 0.4s ease-out forwards;
}

@keyframes underlineFade {
  0% {
    opacity: 0;
    transform: translateX(-50%) scaleX(0.3);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
  }
}

.navbar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* Overlay pentru întunecare */
  z-index: 1;
  
}

.navbar-toggler {
  position: relative;
  z-index: 2; 
}

.navbar-collapse {
  text-align: center;
}

.navbar .navbar-brand,
.navbar .nav-link {
  position: relative;
  z-index: 2;
}



.navbar .nav-link:hover {
  color: #ff6b6b;
  text-shadow: 1px 1px 1px #5A0000;
}

/* ========== 5. Buton cu gradient ========== */
.btn-gradient {
  background: linear-gradient(
    135deg,
    var(--primary-color),
    var(--secondary-color)
  ); /* Gradient albastru-verde */
  color: white;
  border: none;
  padding: 12px 30px;
  font-size: 1.1rem;
  font-weight: bold;
  border-radius: 50px;
  transition:
    transform 0.3s,
    box-shadow 0.3s,
    background 0.3s;
}

.btn-gradient:hover {
  transform: translateY(-5px);
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
  background: linear-gradient(
    135deg,
    var(--secondary-color),
    var(--primary-color)
    
  ); /* Schimbă direcția gradientului la hover */
}

/* ========== 6. Secțiunea cu Parallax ========== */
.parallax {
  background-image: url("/assets/img/background/splash-img.jpg"); /* Înlocuiește cu URL-ul imaginii tale */
  background-attachment: fixed; /* Fixează fundalul în timp ce derulezi */
  background-position: center; /* Centrarea imaginii pe pagină */
  background-repeat: no-repeat; /* Previne repetarea imaginii */
  background-size: cover; /* Asigură că imaginea acoperă întreaga secțiune */
  position: relative; /* Poziționează corect secțiunea în fluxul normal al documentului */
}

/* Masca întunecată */
.parallax::before {
  content: ""; /* Fără text, doar un element vizual */
  position: absolute; /* Plasează masca deasupra imaginii de fundal */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Poți ajusta opacitatea (0.5) pentru a controla intensitatea întunecării */
  z-index: 1; /* Asigură-te că este deasupra imaginii de fundal */
}

/* Stil pentru conținutul secțiunii */
.parallax .container {
  position: relative;
  z-index: 1; /* Asigură-te că textul este deasupra imaginii de fundal */
}

.parallax h1 {
  font-size: 2.5rem;
  color: #ff0000;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
}



.parallax p {
  font-size: 1.2rem;
  color: #ff0000;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .parallax {
    background-attachment: scroll; /* Pe mobil, face background-ul să se deplaseze cu pagina */
    background-position: center;
  }
}
.btn-calculator
{
  height: 100%;
}
.flag {
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.3));
  margin: 20px;
  cursor: pointer;
  border: 2px solid #ffffff;
  border-radius: 50px;

}

.arrows {
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.3));
  margin: 20px;
  cursor: pointer;
  text-align: center;

}


.flag:hover {
  transform: scale(1.1); /* Mărește imaginea */
  filter: brightness(1.2); /* Crește luminozitatea */
}


@keyframes flutter {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-10px); /* Mișcare spre stânga */
  }
  100% {
    transform: translateX(0); /* Revine la poziția inițială */
  }
}


/* ========== 7. Media Queries ========== */
@media (max-width: 768px) {
  header h1 {
    font-size: 2.5rem;
  }

  .navbar .navbar-nav .nav-link {
    padding: 12px 15px;
  }

  section h2 {
    font-size: 2rem;
    color: #ff0000;
  }

  
  .parallax {
    background-attachment: scroll; /* Pe mobil, face background-ul să se deplaseze cu pagina */
    background-position: center;
  }
}

/* ========== 8. Ribbon (panglică) ========== */
.ribbon {
  position: absolute;
  top: 15px;
  left: 20px;
  color: #fff;
  font-size: 12px; /* Dimensiune mai mică pentru text */
  font-weight: 600;
  padding: 6px 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 5px;
  box-shadow:
    2px 2px 10px rgba(0, 0, 0, 0.15),
    -2px -2px 10px rgba(255, 255, 255, 0.25);
  z-index: 10;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  cursor: default;
}

.ribbon-verde {
  background: linear-gradient(145deg, #3f9e72, #62b55e); /* Gradient subtil */
}

.ribbon-rosu {
  background: linear-gradient(
    135deg,
    #d32f2f,
    #e57373
  ); /* Gradient de la roșu la o nuanță mai deschisă */
}
/* La hover, ribbon-ul se mărește ușor */
.ribbon:hover {
  transform: scale(1.05);
  box-shadow:
    4px 4px 15px rgba(0, 0, 0, 0.25),
    -4px -4px 15px rgba(255, 255, 255, 0.35);
}

/* ========== 9. Footer ========== */
footer {
  background: #333;
  color: white;
  text-align: center;
  padding: 30px;
  border-top: 5px solid transparent;
  border-image: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  border-image-slice: 1;
  text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.6); /* Umbra textului mai puternică */
}

footer a {
  color: #fff;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/* ========== 10. Smooth Scroll ========== */
html {
  scroll-behavior: smooth;
}

/* ========== 11. Stiluri pentru butoanele sticky ========== */
.sticky-buttons {
  position: fixed; /* Poziționăm butoanele în colțul din dreapta jos */
  bottom: 30px; /* La 20px de jos */
  right: 20px; /* La 20px de dreapta */
  z-index: 9999999; /* Asigurăm că sunt deasupra altor elemente */
}

/* Stilul pentru fiecare buton sticky (cu gradient și colțuri rotunjite) */
.sticky-btn {
  background: linear-gradient(
    135deg,
    var(--primary-color) 0%,
    var(--secondary-color) 100%
  ); /* Gradient verde deschis și verde închis */
  color: white; /* Culoarea textului */
  border: none; /* Fără borduri */
  border-radius: 12px; /* Colțuri rotunjite pentru un aspect modern */
  padding: 12px; /* Dimensiunea butonului, mai mic decât înainte */
  margin: 8px 0; /* Spațiu între butoane */
  font-size: 20px; /* Mărimea iconiței mai mică pentru un aspect mai compact */
  width: 50px; /* Lățimea fixă pentru buton */
  height: 50px; /* Înălțimea fixă pentru buton */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adăugăm umbra pentru un efect 3D */
  cursor: pointer; /* Cursora devine pointer la hover */
  transition: all 0.3s ease; /* Tranziție lină pentru efectele de hover */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Efect la hover: culoare mai închisă și ridicare */
.sticky-btn:hover {
  background: linear-gradient(
    135deg,
    var(--secondary-color) 0%,
    var(--primary-color) 100%
  ); /* Schimbă gradientul la hover */
  transform: translateY(-5px); /* Efect de ridicare */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Umbra devine mai intensă */
}

/* Schimbăm iconițele pentru a le face mai vizibile */
.sticky-btn i {
  font-size: 22px; /* Mărim iconițele pentru a fi mai vizibile, dar nu prea mari */
  transition: transform 0.3s ease; /* Adăugăm un efect de tranziție pentru iconițe */
}

/* Efect de zoom la hover pentru iconițe */
.sticky-btn:hover i {
  transform: scale(1.2); /* Creștem iconițele la hover */
}

/* Opțional: Poți adăuga și un efect de animație pentru intrarea butoanelor */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInTop {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInBottom {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sticky-btn {
  animation: slideIn 1s ease-out;
}

.slideInLeft {
  animation: slideInLeft 1s ease-out;
}

.slideInRight {
  animation: slideInRight 1s ease-out;
}
.slideInTop {
  animation: slideInTop 1s ease-out;
}
.slideInBottom {
  animation: slideInBottom 1s ease-out;
}

/* Secțiuni */
section {
  padding: 80px 20px;
  position: relative;
}

section.bg-light {
  background: #f9f9f9;
}

section h2 {
  font-size: 2.5rem;
  color: var(--primary-color);
  font-weight: bold;
  margin-bottom: 20px;
}

section p {
  font-size: 1rem;
  color: #000000;
}

/* Carduri moderne */
/* Carduri moderne */
.card {
  border: none;
  border-radius: 15px; /* Colțuri rotunjite */
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1); /* Umbra subtilă */
  transition:
    transform 0.3s,
    box-shadow 0.3s,
    background-color 0.3s; /* Efecte de tranziție pentru hover */
  background: linear-gradient(
    135deg,
    #ffffff,
    #fefafa
  ); /* Gradient subtil pe fundal */
  padding: 20px;
  position: relative;
  overflow: hidden;
  cursor: default;
  height: 100%;
}

.card:hover {
  transform: scale(1.05); /* Efect de scalare la hover */
  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.2); /* Umbra mai puternică la hover */
  background-color: #f7f2f2; /* Schimbarea culorii de fundal la hover */
}

.card:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: url("/assets/img/pattern/qbkls.webp"); 
  background-repeat: repeat;
  opacity: 0.2; /* Ajustează opacitatea pentru o vizibilitate mai bună */
  pointer-events: none;
}

.card i {
  color: var(--primary-color); /* Culoare verde */
  transition: color 0.3s ease; /* Efect de tranziție pentru schimbarea culorii */
}

.card:hover i {
  color: var(--secondary-color); /* Culoare schimbată pe hover */
}

/* Bordura colorată cu gradient pe partea de jos */
.card {
  border-bottom: 10px dashed transparent; /* Bordura transparentă pentru a permite gradientul */
  border-image: linear-gradient(
    to right,
    var(--primary-color),
    var(--secondary-color)
  ); /* Gradient pe bordura de jos */
  border-image-slice: 1; /* Aplică gradientul pe întreaga lățime a bordurii */
}

.card:hover {
  border-bottom: 10px dashed transparent; /* Bordura transparentă pentru a permite gradientul */
  border-image: linear-gradient(
    to left,
    var(--primary-color),
    var(--secondary-color)
  ); /* Gradient pe bordura de jos */
  border-image-slice: 1; /* Aplică gradientul pe întreaga lățime a bordurii */
}


/* Responsive design */
@media (max-width: 768px) {
  header h1 {
    font-size: 2rem;
    
  }

  .navbar .navbar-nav .nav-link {
    padding: 12px 15px;
  }

  section h2 {
    font-size: 2rem;
  }

}

.navbar-brand img.logo {
  height: 30px; /* Ajustează înălțimea logo-ului */
  width: auto; /* Lățimea se ajustează automat în funcție de înălțimea aleasă */
  object-fit: contain; /* Asigură că logo-ul este redimensionat corespunzător */
}

.brand-tag {
  font-size: 6px;
  position: absolute;
  right: 10px;
  top: 30px;
}

/* Personalizează stilul popover-ului */
.popover-body {
  background: #000; /* Gradient albastru-verde */
  color: white;
  border: none;
  padding: 15px 15px;
  transition:
    transform 0.3s,
    box-shadow 0.3s,
    background 0.3s;
}

.popover {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.popover.show {
  opacity: 1;
}

/* Preloader */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  background-image: url("/assets/img/background/splash-img.jpg"); 

  background-attachment: fixed; /* Fixează fundalul în timp ce derulezi */
  background-position: center; /* Centrarea imaginii pe pagină */
  background-repeat: no-repeat; /* Previne repetarea imaginii */
  background-size: cover; /* Asigură că imaginea acoperă întreaga secțiune */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 99999999999;
  color: #fff;
  -webkit-user-select: none; /* Pentru Safari și Chrome */
  -moz-user-select: none; /* Pentru Firefox */
  -ms-user-select: none; /* Pentru Internet Explorer */
  user-select: none; /* Standard */
  text-align: center;
}

#preloader img {
  width: 75%;
  height: auto;
  animation: pulse 1s infinite; /* Aplica animația */
  z-index: 99999999999999;
}

#preloader::before{
  content: ""; /* Fără text, doar un element vizual */
  position: absolute; /* Plasează masca deasupra imaginii de fundal */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Poți ajusta opacitatea (0.5) pentru a controla intensitatea întunecării */
  z-index: 1; /* Asigură-te că este deasupra imaginii de fundal */

}


@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.loading-text {
  margin-top: 15px;
  font-size: 1rem;
  font-weight: bold;
  color: #ff0000; /* Culoarea textului */
  animation: pulse 1s infinite; /* Aplica animația */
  z-index: 99999999999999;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5; /* Textul devine mai transparent */
  }
  100% {
    opacity: 1; /* Revine la opacitate completă */
  }
}

.clr-black {
  color: #000 !important;

}


/* ========== 1. Cum functioneaza ========== */

#cum-functioneaza h3 {
  font-weight: 600;
  margin-bottom: 10px;
}
#cum-functioneaza img {
  transition: all 0.3s ease-in-out;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  border: 3px solid #ffffff;
 /* filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.3)); */
  
  
}
#cum-functioneaza img:hover {
  transform: scale(1.05);
  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.4); /* Umbră mai intensă */
}

/* ----------- */

.text-platinum {
  color: #E5E4E2; /* Platină subtilă */
}
.text-silver {
  color: #B0B0B0; /* Gri argintiu pentru contrast */
}
.letter-spacing-1 {
  letter-spacing: 1px;
}
.letter-spacing-2 {
  letter-spacing: 2px;
}
.feature-box {
  transition: transform 0.3s ease;
}
.feature-box:hover {
  transform: translateY(-5px); /* Efect subtil de hover pentru interactivitate */
}