@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
@import url(https://fonts.googleapis.com/css?family=Chewy);










#servicii2 {
  display: flex;
  justify-content: center;
  gap: 2em;
  padding: 3em 0;
  background-color: #000; /* fundal negru */
  flex-wrap: wrap;
}

/* Carduri exclusive pentru această secțiune */
.servicii-card {
  background: #000; /* fundal negru sigur */
  border-radius: 15px;
  padding: 2em;
  max-width: 180px;
  width: 100%;
  text-align: center;
  color: #fff;
  box-shadow: 0 0 15px rgba(0,255,0,0.3);
  transform: translateY(20px);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  animation: fadeUp 1s ease forwards;
}

/* Delay pentru al doilea card */
.servicii-card:nth-child(2) {
  animation-delay: 0.2s;
}

/* Hover efect */
.servicii-card:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 0 25px #00ff00, 0 0 60px rgba(0,255,0,0.3);
}

/* Icon pulsant */
.servicii-card .icon {
  font-size: 3em;
  margin-bottom: 1em;
  color: #00ff00;
  animation: pulse 2s infinite;
  transition: transform 0.5s ease, color 0.5s ease;
}

.servicii-card.open .icon:hover {
  transform: rotate(20deg) scale(1.2);
  color: #00ffcc;
}

.servicii-card.closed .icon {
  color: #ff0000;
}

.servicii-card.closed:hover .icon {
  transform: rotate(-20deg) scale(1.2);
  color: #ff6666;
}

/* Text info */
.servicii-card .info .title {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 0.3em;
}

.servicii-card .info .hours,
.servicii-card .info .status {
  font-size: 1em;
  margin-bottom: 0.3em;
}

/* Animatie la aparitie */
@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(50px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Puls icon */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* Gradient animat fundal subtil */
.servicii-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(45deg, rgba(0,255,0,0.1), rgba(0,255,0,0.05), rgba(0,255,0,0.1));
  pointer-events: none;
  border-radius: 15px;
  animation: gradientMove 4s linear infinite;
}

@keyframes gradientMove {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}
  

.box {
            text-align: center;
            margin: 0 auto;
            margin-bottom: 20px;
            padding: 20px;
            border: 0px solid #ccc;
            max-width: 350px;
            width: 100%;
            border-bottom: 5px solid purple; /* Adaugarea bordurii verzi in partea de jos */
            background-color: #242424;
        }

        .logo {
            /* Stilizare pentru logo */
        }

        .title {
            font-size: 24px;
            margin: 10px 0;
            color: white;
        }

        .text {
            font-size: 16px;
            color: lime;
          transform: translateY(200px);
            animation: slideInRightt 2.5s ease-out forwards;
        }


.boxpremium {
            text-align: center;
            margin: 0 auto;
            margin-bottom: 20px;
            padding: 20px;
            border: 0px solid #ccc;
            max-width: 350px;
            width: 100%;
            border-bottom: 5px solid yellow; /* Adaugarea bordurii verzi in partea de jos */
            background-color: #242424;
        }

        .logo {
            /* Stilizare pentru logo */
        }

        .title {
            font-size: 24px;
            margin: 10px 0;
            color: white;
        }

        .text {
            font-size: 16px;
            color: lime;
          transform: translateY(200px);
            animation: slideInRightt 2.5s ease-out forwards;
        }


@keyframes slideInRightt {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}







body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: url("bgprogramare.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

header {
  background-image: url('Alexbg.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  animation: gradientAnimation 6s ease infinite;
  color: #fff;
  text-align: center;
  padding: 1em;
  height: 100vh; /* Înălțimea de 100% a ecranului */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes backgroundAnimation {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}



.services-section {
  max-width: 1100px;
  margin: 2em auto;
  padding: 2em;
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0 0 25px rgba(128, 0, 128, 0.25);
}

.title-gradient {
  font-size: 2.3rem;
  background: linear-gradient(to right, purple, #ff00ff);
  -webkit-background-clip: text;
  color: transparent;
  margin-bottom: .3em;
}

.section-line {
  width: 120px;
  height: 4px;
  background: purple;
  border: none;
  margin: 0 auto 2em auto;
  border-radius: 10px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.4em;
  margin-bottom: 3em;
}

.card {
  background: #faf7ff;
  padding: 1.6em;
  border-radius: 15px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
  transition: 0.3s ease;
  text-align: left;
  border-left: 5px solid purple;
}

.card h3 {
  margin-top: 0;
  margin-bottom: 0.6em;
  font-size: 1.3rem;
  font-weight: 700;

  /* Gradient animat */
  background: linear-gradient(90deg, #6a00ff, #ff00ea, #ff8b00, #6a00ff);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  color: transparent;
  animation: gradientMove 4s ease infinite;
}

/* Animația gradientului */
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.card p {
  margin: 0;
  line-height: 1.6;
  font-size: 0.95rem;
  color: #444;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(128, 0, 128, 0.25);
  background: #ffffff;
}


footer {
  text-align: center;
  padding: 1em;
  background-color: #333;
  color: #fff;
}


form {
    background-color: rgba(255, 255, 255, 0.5); /* Aici setezi opacitatea la 0.5 (50%) */
    backdrop-filter: blur(10px); /* Aplică efectul de blur */
    padding: 20px;
    border-radius: 10px;
}

label {
  display: block;
  margin-bottom: 0.5em;
}

input, textarea {
  width: 100%;
  padding: 0.5em;
  margin-bottom: 1em;
  border: 1px solid #ccc;
  border-radius: 4px;
}


/* CSS */
.button-33 {
  background-color: #c2fbd7;
  border-radius: 100px;
  box-shadow: rgba(44, 187, 99, .2) 0 -25px 18px -14px inset,rgba(44, 187, 99, .15) 0 1px 2px,rgba(44, 187, 99, .15) 0 2px 4px,rgba(44, 187, 99, .15) 0 4px 8px,rgba(44, 187, 99, .15) 0 8px 16px,rgba(44, 187, 99, .15) 0 16px 32px;
  color: green;
  cursor: pointer;
  display: inline-block;
  font-family: CerebriSans-Regular,-apple-system,system-ui,Roboto,sans-serif;
  padding: 7px 20px;
  text-align: center;
  text-decoration: none;
  transition: all 250ms;
  border: 0;
  font-size: 16px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-33:hover {
  box-shadow: rgba(44,187,99,.35) 0 -25px 18px -14px inset,rgba(44,187,99,.25) 0 1px 2px,rgba(44,187,99,.25) 0 2px 4px,rgba(44,187,99,.25) 0 4px 8px,rgba(44,187,99,.25) 0 8px 16px,rgba(44,187,99,.25) 0 16px 32px;
  transform: scale(1.05) rotate(-1deg);
}




/* CSS */
.super-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 28px;
  background: linear-gradient(145deg, #0f0f0f, #1c1c1c);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s ease-in-out;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  z-index: 1;
}

.super-button::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, #00ffff, #ff00ff, #00ffff);
  animation: rotate 4s linear infinite;
  z-index: -2;
}

.super-button::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: #0a0a0a;
  border-radius: inherit;
  z-index: -1;
}

.super-button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 40px rgba(0, 255, 255, 0.2);
}

.super-button:hover .arrow {
  transform: translateX(6px);
}

.arrow {
  width: 22px;
  height: 22px;
  transition: transform 0.3s ease-in-out;
  color: #00ffff;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}



/* CSS */
.button-66 {
  padding: 0.6em 2em;
  border: none;
  outline: none;
  color: rgb(255, 255, 255);
  background: #111;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 10px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-66:before {
  content: "";
  background: linear-gradient(
    45deg,
    #ff0000,
    #ff7300,
    #fffb00,
    #48ff00,
    #00ffd5,
    #002bff,
    #7a00ff,
    #ff00c8,
    #ff0000
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing-button-85 20s linear infinite;
  transition: opacity 0.3s ease-in-out;
  border-radius: 10px;
}

@keyframes glowing-button-85 {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.button-66:after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #222;
  left: 0;
  top: 0;
  border-radius: 10px;
}


hr {
  border: 0;
  height: 2px;
  background-image: linear-gradient(to right, transparent, #08ff10, transparent);
  margin: 0.5em 0;
}

#special-hr {
            border: none;
            height: 3px;
            margin: 40px 0;
            background-image: linear-gradient(to right, #FFF, #BFE2FF, #FFF);
        }
        #special-hr:before,
        #special-hr:after {
            content: '';
            display: inline-block;
            border-radius: 100%;
            width: 40px;
            height: 40px;
            border: 2px solid #BFE2FF;
            position: absolute;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #000;
        }
        #special-hr:after {
            animation: animation 1s linear infinite; 
        }
        @keyframes animation {
            0% {
                width: 40px;
                height: 40px;
            }
            100% {
                width: 0;
                height: 0;
            }
        }


.arrow-down {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 15px solid #fff;
  margin-top: 150px;
  animation: bounceUpDown 2s ease-in-out infinite; /* Noua animație */
}

@keyframes bounceUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(25px);
  }
}



#servicii {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  padding: 2em 0;
  background-color: black;
}

.servicii-list {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.serviciu {
  text-align: center;
  margin-bottom: 1em; /* Ajustează spațiul între servicii */
}

.serviciu-icon {
  width: 100px;
  height: 100px;
  background-color: #3494e6; /* Ajustează culoarea */
  border-radius: 50%;
  margin-bottom: 0.5em;
}

.serviciu p {
  margin-top: 0.5em;
  font-weight: bold;
  color: #333; /* Ajustează culoarea textului */
}




.h2gradient {
    background: linear-gradient(to right, red, #a750cc, #ff03c8);
    -webkit-background-clip: text;
    color: transparent;
    font-family: 'Arial', 'sens-serif';
}


.textgradient {
    background: linear-gradient(to right, lime, green, purple);
    -webkit-background-clip: text;
    color: transparent;
    font-family: 'Arial', 'sens-serif';
}


.h2text {
    font-family: 'Chewy';
}



header h1 {
  opacity: 0;
  transform: translateY(-200px);
  animation: fadeInUp 2.5s ease-out forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

header p {
  opacity: 0;
  transform: translateY(200px);
  animation: slideInRight 1.5s ease-out forwards;
}

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


header:hover .arrow-down {
  transform: translateY(10px);
}



  
 #staff {
  text-align: center;
  padding: 3em 0;
  background-color: #111; /* fundal mai dark pentru glow */
  color: #fff;
}

#staff h1 {
  font-size: 2.5em;
  margin-bottom: 0.3em;
}

#staff hr {
  width: 50px;
  height: 3px;
  background: #00ff00;
  border: none;
  margin: 0 auto 2em;
  border-radius: 5px;
}

/* Container carduri */
.staff-members {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2em;
}

/* Card individual */
.staff-card {
  position: relative;
  background: #1e1e1e;
  border-radius: 15px;
  padding: 2em 1.5em;
  width: 180px;
  text-align: center;
  color: #fff;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0,255,0,0.2);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.staff-card i {
  font-size: 4em;
  margin-bottom: 0.5em;
  color: #00ff00;
  transition: transform 0.5s ease, color 0.5s ease;
}

.staff-card h2 {
  margin: 0.5em 0;
}

.staff-card p {
  font-size: 0.9em;
  font-weight: bold;
  color: #ccc;
}

/* Glow effect dinamic */
.staff-card .glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(rgba(0,255,0,0.6), rgba(0,255,0,0) 25%, rgba(0,255,0,0.6) 50%, rgba(0,255,0,0) 75%);
  animation: rotateGlow 4s linear infinite;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Punem conținutul peste glow */
.staff-card * {
  position: relative;
  z-index: 1;
}

/* Hover card */
.staff-card:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 0 30px #00ff00, 0 0 60px rgba(0,255,0,0.3);
}

.staff-card:hover i {
  transform: scale(1.2) rotate(10deg);
  color: #00ffcc;
}

/* Animatii */
@keyframes rotateGlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
  
      h1 {
      position: relative;
      display: inline-block;
    }
  
 h1::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -2px; /* Ajustați această valoare pentru a controla înălțimea liniei */
      width: 100%; /* Ajustați această valoare pentru a controla lungimea liniei (mai mică decât textul) */
      height: 8px; /* Ajustați grosimea liniei */
      background: linear-gradient(to right, #00ff00, transparent); /* Gradient de la verde la transparent */
      transform: skewX(45deg); /* Inclinarea liniei la 45 de grade */
    }


.container {
  background-color: rgba(20, 20, 20, 0.6);
}


#tunsori {
      padding: 50px 0;
      text-align: center;
    }

.gallery {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
.image-container {
      margin: 10px;
      width: 150px; /* Ajustează proporția de imagini pe rând */
      position: relative;
    }

.image-container img {
  max-width: 100%;
  height: 200px; /* Schimbă această valoare cu înălțimea dorită */
  object-fit: cover; /* Asigură că imaginea este redimensionată corect în container */
  cursor: pointer; /* Afișează cursor de pointer pentru a indica faptul că imaginile sunt clicabile */
}

.image-container::before, .image-container::after {
  content: '';
  position: absolute;
  width: 20px; /* Ajustează lățimea bordurii */
  height: 20px; /* Ajustează înălțimea bordurii */
  border: 2px solid red; /* Ajustează grosimea și culoarea bordurii */
}

/* Colțul din dreapta jos */
.image-container::after {
  bottom: 0;
  right: 0;
  border-left: none; /* Elimină bordura pe partea stângă pentru a crea un colț */
  border-top: none; /* Elimină bordura de sus pentru a crea un colț */
}

/* Colțul din stânga sus */
.image-container::before {
  top: 0;
  left: 0;
  border-right: none; /* Elimină bordura pe partea dreaptă pentru a crea un colț */
  border-bottom: none; /* Elimină bordura de jos pentru a crea un colț */
}