/*-----------------------------------*\

#CUSTOM PROPERTY

\*-----------------------------------*/



:root {



/**

* colors

*/



--green-blue-crayola: hsl(202, 75%, 47%);

--prussian-blue: hsl(202, 72%, 15%);

--eerie-black: hsl(210, 11%, 15%);

--dark-orange: hsl(32, 100%, 50%);

--alice-blue: hsl(203, 100%, 97%);

--light-gray: hsl(0, 0%, 80%);

--indigo-dye: hsl(202, 64%, 26%);

--cultured-1: hsl(0, 0%, 94%);

--cultured-2: hsl(0, 0%, 95%);

--cultured-3: hsl(0, 0%, 95%);

--plutinum: hsl(0, 0%, 91%);

--black_60: hsla(0, 0%, 0%, 0.6);

--white: hsl(0, 0%, 100%);

--black: hsl(0, 0%, 0%);

--onyx: hsl(0, 0%, 24%);



/**

* typography

*/



--ff-oswald: 'Oswald', sans-serif;

--ff-rubik: 'Rubik', sans-serif;



--fs-1: 6rem;

--fs-2: 5rem;

--fs-3: 4rem;

--fs-4: 3rem;

--fs-5: 2.2rem;

--fs-6: 2rem;

--fs-7: 1.8rem;

--fs-8: 1.5rem;

--fs-9: 1.4rem;

--fs-10: 1.2rem;



--fw-500: 500;

--fw-600: 600;

--fw-700: 700;

--fw-800: 800;



/**

* spacing

*/



--section-padding: 50px;



/**

* shadow

*/


-
--shadow-2: 0px 40px 60px hsla(202, 75%, 47%, 0.7);

--shadow-3: 0px 0px 60px hsla(202, 75%, 47%, 0.5);



/**

* transition

*/



--transition: 0.25s ease;

--cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);

--cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);



}











/*-----------------------------------*\

#RESET

\*-----------------------------------*/



*,

*::before,

*::after {

margin: 0;

padding: 0;

box-sizing: border-box;

}



li { list-style: none; }



a {

text-decoration: none;

color: inherit;

}



a,

img,

time,

span,

input,

button,

ion-icon { display: block; }



img { height: auto; }



input,

button {

background: none;

border: none;

font: inherit;

}



input { width: 100%; }



button { cursor: pointer; }



ion-icon { pointer-events: none; }



html {

font-family: var(--ff-rubik);

font-size: 10px;

scroll-behavior: smooth;

}



body {

background-color: var(--white);

color: var(--onyx);

font-size: 1.6rem;

line-height: 1.7;

}



:focus-visible { outline-offset: 4px; }



::-webkit-scrollbar { width: 12px; }



::-webkit-scrollbar-track { background-color: var(--cultured-2); }



::-webkit-scrollbar-thumb {

background-color: hsl(0, 0%, 80%);

border: 2px solid var(--cultured-2);

}



::-webkit-scrollbar-thumb:hover { background-color: hsl(0, 0%, 70%); }











/*-----------------------------------*\

#REUSED STYLE

\*-----------------------------------*/



.container { padding-inline: 15px; }



.section { padding-block: var(--section-padding); }



.h1,

.h2,

.h3 {

font-family: var(--ff-oswald);

line-height: 1.2;

font-weight: var(--fw-600);

}



.h1 {

font-size: var(--fs-3);

text-transform: uppercase;

}



.h2,

.h3 { color: var(--prussian-blue); }



.h2 { font-size: var(--fs-4); }



.h3 { font-size: var(--fs-5); }



.img-holder {

background-color: var(--light-gray);

aspect-ratio: var(--width) / var(--height);

}



.img-cover {

width: 100%;

height: 100%;

object-fit: cover;

}



.section-subtitle {

color: var(--dark-orange);

text-transform: uppercase;

font-size: var(--fs-6);

font-family: var(--ff-oswald);

font-weight: var(--fw-600);

letter-spacing: 3px;

margin-block-end: 10px;

}



.section-text { line-height: 1.4; }



.btn {

position: relative;

color: var(--white);

background-color: var(--dark-orange);

max-width: max-content;

font-size: var(--fs-9);

letter-spacing: 1px;

padding-block: 10px;

padding-inline: 15px 50px;

}



.btn::before,

.btn::after {

content: "";

position: absolute;

transition: var(--transition);

}



.btn::before {

top: 50%;

right: 15px;

width: 25px;

height: 1px;

background-color: var(--white);

}



.btn::after {

top: -6px;

right: -6px;

bottom: -6px;

width: 20px;

border: 2px solid var(--dark-orange);

z-index: -1;

}



.btn:is(:hover, :focus)::before { width: 33px; }



.btn:is(:hover, :focus)::after { width: 40px; }



.grid-list {

display: grid;

gap: 30px;

}



.btn-link {
  color: var(--dark-orange);
  font-size: var(--fs-7);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
}

@media (max-width: 991px) {
  .btn-link .span {
    white-space: nowrap;
  }
}

.btn-link > * {

transform: translateX(-22px);

transition: var(--transition);

}



.btn-link:is(:hover, :focus) > * { transform: translateX(0); }



.w-100 { width: 100%; }











/*-----------------------------------*\

#HEADER

\*-----------------------------------*/



.header-contact,
.theme-switch-wrapper {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: 0.3s;
}

.header-contact {
  display: block; /* Setează display la "block" pentru mobil */
}

.header-contact .contact-icon ion-icon {
  color: white; /* inițial alb */
  transition: color 0.3s ease;
  font-size: 24px; /* dimensiune icon mai mică */
}

.header-contact .contact-icon:hover ion-icon {
  color: orange; /* portocaliu la hover */
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding-block: 15px;
  z-index: 4;
  transition: var(--transition);
  opacity: 0;
  transform: translateY(-50px);
  transition: all 2.1s ease; /* durată mai lentă */
}

.header.show {
  opacity: 1;
  transform: translateY(0);
}

.header.active { background-color: var(--green-blue-crayola); }

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.logo {
  font-family: var(--ff-oswald);
  color: var(--white);
  font-size: 3rem;
}
.error-message {
    color: red;
    font-size: 0.85rem;
    margin-top: 5px;
    display: block;
    }
.nav-open-btn {
  color: var(--white);
  font-size: 35px;
}
.nav-open-btn ion-icon {
  --ionicon-stroke-width: 40px;
}

.navbar {
  position: fixed;
  top: 0;
  left: -300px;
  max-width: 300px;
  width: 100%;
  height: 100%;
  background-color: var(--white);
  box-shadow: var(--shadow-1);
  z-index: 3;
  visibility: hidden;
  transition: 0.25s var(--cubic-in);
}

.navbar.active {
  visibility: visible;
  transform: translateX(300px);
  transition: 0.5s var(--cubic-out);
}

.navbar-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-block-end: 1px solid var(--plutinum);
  padding: 30px 20px;
}

.navbar-top .logo {
  color: var(--onyx);
  font-size: 3rem;
}

@media (max-width: 991px) {
  .nav-close-btn {
      display: block;
      z-index: 1000; /* Asigură-te că este deasupra overlay-ului */
      position: absolute;
      top: 15px;
      right: 15px;
      font-size: 2.5rem;
      color: var(--black);
      background-color: transparent;
      padding: 20px;
    }
     .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        opacity: 0;
        pointer-events: none;
        transition: 0.2s ease-in-out;
        z-index: 999; /* Trebuie să fie mai mic decât z-index-ul butonului de închidere */
      }
      .overlay.active {
        opacity: 1;
        pointer-events: auto;
      }
  .nav-open-btn {
    display: block;
    z-index: 100;
    margin-right: 18px;
  }
}
.navbar-item:not(:last-child) { border-block-end: 1px solid var(--plutinum); }

.navbar-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    transition: var(--transition);
    background-color: rgba(0, 0, 0, 0.6);
    color: white; /* Acum e singura regula pentru culoare */
    border-radius: 5px;
}

.navbar-link:is(:hover, :focus) {
  background-color: var(--cultured-1);
  color: var(--dark-orange);
}

.overlay {
  position: fixed;
  inset: 0;
  background-color: var(--black_60);
  z-index: 2;
  visibility: hidden;
  opacity: 0;
  transition: var(--transition);
}

.overlay.active {
  visibility: visible;
  opacity: 1;
}

.slider .icon ion-icon {
  color: #fff; /* alb */
  font-size: 20px; /* poți ajusta la 28px dacă vrei mai mare */
}

.icon {
  font-size: 24px;
  transition: color 0.3s;
}

.icon.sun { color: #ffffff; } /* alb normal */
.icon.moon { color: #cccccc; } /* alt alb */

.icon:hover {
  --ionicon-color: orange;
}

.slider .sun {
  left: 8px;
  opacity: 1; /* soarele evidențiat inițial (light mode) */
}

.slider .moon {
  right: 8px;
  opacity: 0.5; /* luna estompată inițial */
}

/* Dark mode activ (toggle checked) */
input:checked + .slider .sun {
  opacity: 0.5; /* soarele estompat */
}

input:checked + .slider .moon {
  opacity: 1; /* luna evidențiată */
}
/*-----------------------------------*\

#HERO

\*-----------------------------------*/



.hero {
  position: relative;
  min-height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: grid;
  place-content: center;
  padding-block-start: calc(var(--section-padding) + 85px);
  z-index: 1;
}

.hero-content {
  background-color: var(--black_60);
  color: var(--white);
  text-align: center;
  padding: 30px;

  /* start invizibil + offset pentru animație */
  opacity: 0;
  transform: translateX(-50px);
  transition: all 1.2s ease; /* animație mai lentă */
}

.hero-content.show {
  opacity: 1;
  transform: translateX(0);
}

/* animare individuală pe titlu, paragraf și buton */
.logo-container {
  display: inline-block;
  overflow: hidden; /* textul nu depășește containerul */
}

.logo {
  display: inline-block;
  white-space: nowrap;
  transform: translateX(-2%); /* start aproape de poziția finală */
  animation: moveLine 4s linear forwards;
}

@keyframes moveLine {
  0% {
    transform: translateX(-2%);
  }
  100% {
    transform: translateX(0); /* se oprește la poziția normală */
  }
}

.btn-outline {
  opacity: 0;
  transform: translateX(-30px);
  transition: all 1.2s ease 0.6s; /* delay pentru buton */
}

/* când hero-content are clasa show, toate intră cu delay */
.hero-content.show .hero-title,
.hero-content.show .hero-text,
.hero-content.show .btn-outline {
  opacity: 1;
  transform: translateX(0);
}


.hero-content.show .hero-title,
.hero-content.show .hero-text,
.hero-content.show .btn-outline {
  opacity: 1;
  transform: translateX(0);
}

.hero-title .span {

color: var(--dark-orange);

font-size: var(--fs-2);

font-weight: var(--fw-700);

}



.hero-text { margin-block: 20px 15px; }



.btn-outline {

max-width: max-content;

margin-inline: auto;

font-size: var(--fs-9);

font-weight: var(--fw-500);

text-transform: uppercase;

border: 1px solid var(--white);

padding: 8px 20px;

transition: var(--transition);

}



.btn-outline:is(:hover, :focus) {

background-color: var(--dark-orange);

border-color: var(--dark-orange);

}



.hero-shape {

position: absolute;

z-index: -1;

animation: move 2s ease-in-out infinite alternate;

}



.hero .shape-1 {

top: 100px;

left: 30px;

}



.hero .shape-2 {

bottom: 80px;

right: 30px;

}



@keyframes move {

0% { transform: translateY(0); }

100% { transform: translateY(20px); }

}











/*-----------------------------------*\

#ABOUT

\*-----------------------------------*/



.about-banner {

position: relative;

box-shadow: var(--shadow-2);

max-width: 300px;

margin-block-end: 60px;

}



.about .abs-img-2 { display: none; }



.about .abs-img-1 {

position: absolute;

bottom: 40px;

right: 0;

animation: move 2s ease-in-out infinite alternate;

}
/* animare doar pentru about */
.about-content {
  opacity: 0;
  transform: translateX(50px);
  transition: all 1.2s ease;
}

.about-content.show {
  opacity: 1;
  transform: translateX(0);
}

/* escalonare doar pentru about */
.about-content .section-subtitle,
.about-content .section-title,
.about-content .section-text,
.about-content .about-item {
  opacity: 0;
  transform: translateX(30px);
  transition: all 1.2s ease;
}

.about-content.show .section-subtitle {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.2s;
}

.about-content.show .section-title {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.4s;
}

.about-content.show .section-text {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.6s;
}

.about-content.show .about-item {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.8s;
}


.about :is(.section-title, .section-text) { margin-block-end: 20px; }



.about-list { margin-block-end: 40px; }



.about-item {

display: flex;

align-items: flex-start;

gap: 15px;

}



.about-text { font-size: var(--fs-8); }



.about-icon {

min-width: max-content;

color: var(--dark-orange);

margin-block-start: 8px;

}



.about-item:not(:last-child) { margin-block-end: 10px; }











/*-----------------------------------*\

#SERVICE

\*-----------------------------------*/



.service { background-color: var(--alice-blue); }



.service :is(.section-subtitle, .section-title, .section-text) { text-align: center; }



.service .section-title { margin-block-end: 20px; }



.service .section-text { margin-block-end: 50px; }



.service-card {

background-color: var(--white);

padding: 30px;

border: 20px solid var(--cultured-3);

transition: var(--transition);

}
.service .container > * {
  opacity: 0;
  transform: translateX(-50px); /* start din stânga */
  transition: all 1.2s ease;
}

/* când intră în vizor */
.service.show .container > * {
  opacity: 1;
  transform: translateX(0);
}

/* escalonare pentru subtitlu, titlu, text și carduri */
.service .section-subtitle {
  transition-delay: 0.2s;
}

.service .section-title {
  transition-delay: 0.4s;
}

.service .section-text {
  transition-delay: 0.6s;
}

.service .service-card {
  transition-delay: 0.8s;
}

.posts-card {

background-color: var(--white);

padding: 30px;

border: 20px solid var(--cultured-3);

transition: var(--transition);

}
.service-card .card-icon {
  width: 160px; /* Am mărit lățimea */
  height: 160px; /* Am mărit înălțimea */
  display: flex;
  justify-content: center;
  align-items: center;
}

.service-card .card-icon img {
  width: 100%; /* Imaginea va umple acum 120px */
  height: auto;
  object-fit: contain;
  /* Eliminați linia 'transform: scale(1.6);' */
}

.posts-card {
  background-color: var(--white);
  padding: 30px;
  border: 20px solid var(--cultured-3); /* Bordura inițială */
  transition: var(--transition);
}
.posts-card:is(:hover, :focus-within) {
  border-color: var(--dark-orange); /* Setează bordura la portocaliu */
  /* Poți elimina linia cu background-color: var(--orange-soda) !important; dacă vrei exact același comportament */
}
.posts-card.expanded {

height: auto;

overflow: visible;

}
.service-card:is(:hover, :focus-within)
 { border-color: var(--dark-orange);
  }
  .service-card .card-icon
   { margin-block-end: 30px;
    }
.service-card .card-title .span
 { display: inline-block;
 color: var(--dark-orange);
  font-size: var(--fs-3);
  margin-inline-end: 15px;
   }

.dark-mode .posts-card .card-text {

color: var(--light-gray); /* Asigură-te că textul rămâne vizibil */

}
.glow-text {
  color: black; /* sau culoarea inițială a footer-ului */
  transition: color 0.3s ease;
}

.glow-text:hover {
  color: orange;
  text-shadow:
    0 0 5px orange,
    0 0 10px orange,
    0 0 20px orange,
    0 0 40px orange;
  animation: glow 1.5s infinite alternate;
}
.wavy-logo span {
  display: inline-block;
  transition: transform 0.3s ease;
}

.wavy-logo:hover span {
  animation: wave 1s infinite;
}
.wavy-text {
  display: inline-block;
  white-space: normal; /* permite wrap */
}

.wavy-text span {
  display: inline-block;
  animation: wave 1.5s ease-in-out infinite;
}
.wavy-logo:hover span:nth-child(1) { animation-delay: 0s; }
.wavy-logo:hover span:nth-child(2) { animation-delay: 0.05s; }
.wavy-logo:hover span:nth-child(3) { animation-delay: 0.1s; }
/* și tot așa pentru fiecare literă, crește delay-ul puțin câte puțin */

@keyframes wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes glow {
  0% { text-shadow: 0 0 5px orange, 0 0 10px orange, 0 0 20px orange, 0 0 40px orange; }
  50% { text-shadow: 0 0 10px orange, 0 0 20px orange, 0 0 30px orange, 0 0 60px orange; }
  100% { text-shadow: 0 0 5px orange, 0 0 10px orange, 0 0 20px orange, 0 0 40px orange; }
}
.footer-list-title span,
.footer-link span {
  display: inline-block;
  transition: transform 0.3s ease;
}

/* Animație val la hover */
.footer-list-title:hover span,
.footer-link:hover span {
  animation: wave 1s infinite;
}

.footer-list-title:hover span:nth-child(1) { animation-delay: 0s; }
.footer-list-title:hover span:nth-child(2) { animation-delay: 0.05s; }
/* adaugă delay-uri incremental pentru fiecare literă */

.footer-link:hover span:nth-child(1) { animation-delay: 0s; }
.footer-link:hover span:nth-child(2) { animation-delay: 0.05s; }
/* idem pentru toate literele */

@keyframes wave {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.dark-mode .posts-card .card-title {

color: var(--white);

}

.posts-card:hover {

background-color: var(--orange-soda) !important;

}



.dark-mode .posts-card:hover {
background-color: var(--rich-black-fogra-29);
border-color: var(--dark-orange) !important;

}

.dark-mode .posts-card .card-title .span {

color: var(--spanish-gray); /* Asigură-te că numărul este vizibil */

}

.service-card .card-text { margin-block: 10px 20px; }









/*-----------------------------------*\

#FEATURE

\*-----------------------------------*/



.feature .title-wrapper { margin-block-end: 30px; }



.feature .section-text { margin-block: 20px 40px; }



.feature-card {

position: relative;

padding: 30px;

text-align: center;

border: 1px solid var(--alice-blue);

transition: var(--transition);

}



.feature-card:is(:hover, :focus-within) { box-shadow: var(--shadow-3); }



.feature-card::before {

content: var(--card-number);

color: var(--cultured-1);

font-family: var(--ff-oswald);

font-size: var(--fs-1);

font-weight: var(--fw-700);

line-height: 1;

transition: var(--transition);

}



.feature-card:is(:hover, :focus-within)::before { color: var(--dark-orange); }



.feature-card .card-icon {

background-color: var(--alice-blue);

width: 170px;

height: 170px;

display: grid;

place-content: center;

border-radius: 50%;

margin-inline: auto;

margin-block-end: 30px;

}



.feature-card .card-text { margin-block: 20px 40px; }



.feature-card .card-btn {

color: var(--prussian-blue);

font-size: 24px;

border: 2px solid var(--prussian-blue);

max-width: max-content;

margin-inline: auto;

padding: 10px 18px;

}











/*-----------------------------------*\

#PROJECT

\*-----------------------------------*/
.project .container > * {
  opacity: 0;
  transform: translateX(-50px); /* start din stânga */
  transition: all 1.2s ease;
}

/* când intră în vizor */
.project.show .container > * {
  opacity: 1;
  transform: translateX(0);
}

/* escalonare pentru subtitlu, titlu, text */
.project .section-subtitle {
  transition-delay: 0.2s;
}

.project .section-title {
  transition-delay: 0.4s;
}

.project .section-text {
  transition-delay: 0.6s;
}

/* fiecare project-item intră cu delay incremental */
.project .project-item {
  opacity: 0;
  transform: translateX(-30px);
  transition: all 1.2s ease;
}

.project.show .project-item:nth-child(1) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.8s;
}

.project.show .project-item:nth-child(2) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 1s;
}

.project.show .project-item:nth-child(3) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 1.2s;
}

.project.show .project-item:nth-child(4) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 1.4s;
}

.project.show .project-item:nth-child(5) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 1.6s;
}

.project.show .project-item:nth-child(6) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 1.8s;
}


.project {
  background-color: #d6eaff; /* light pastel blue */
}



.project :is(.section-subtitle, .section-title, .section-text) { text-align: center; }



.project .section-text { margin-block: 20px 50px; }



.project-card { position: relative; }



.project-card .action-btn {

background-color: var(--dark-orange);

color: var(--white);

font-size: 28px;

padding: 16px;

position: absolute;

top: 30px;

left: 30px;

opacity: 0;

transition: var(--transition);

}



.project-card:is(:hover, :focus-within) .action-btn { opacity: 1; }



.project-card .card-tag {

color: var(--dark-orange);

font-size: var(--fs-9);

}



.project-card .card-content {

position: relative;

background-color: var(--white);

padding: 20px 30px;

margin-block-start: -50px;

margin-inline-start: 30px;

}



.project-card .h3 { font-size: var(--fs-7); }



.project-card .card-title { transition: var(--transition); }



.project-card :is(.card-title, .card-link):is(:hover, :focus) { color: var(--dark-orange); }



.project-card .card-link {

color: var(--prussian-blue);

font-size: var(--fs-10);

font-weight: var(--fw-600);

text-transform: uppercase;

margin-block-start: 5px;

transition: var(--transition);

}



.project-list {

display: flex;

overflow-x: auto;

gap: 20px;

/* Am adăugat spațiu, dar o valoare mai mică decât inițial */

padding-block-end: 10px;

scroll-snap-type: inline mandatory;

}



.project-item {

min-width: 100%;

scroll-snap-align: start;

}



.project-list::-webkit-scrollbar { height: 15px; }



.project-list::-webkit-scrollbar-track { outline: 2px solid var(--prussian-blue); }



.project-list::-webkit-scrollbar-thumb {

border: 3px solid var(--cultured-1);

background-color: var(--prussian-blue);

}



.project-list::-webkit-scrollbar-button { width: calc(25% - 40px); }





/*-----------------------------------*\

#BLOG

\*-----------------------------------*/
.blog .container > * {
  opacity: 0;
  transform: translateX(50px); /* start din dreapta */
  transition: all 1.2s ease;
}

/* când intră în vizor */
.blog.show .container > * {
  opacity: 1;
  transform: translateX(0);
}

/* escalonare pentru subtitlu, titlu, text */
.blog .section-subtitle {
  transition-delay: 0.2s;
}

.blog .section-title {
  transition-delay: 0.4s;
}

.blog .section-text {
  transition-delay: 0.6s;
}

/* fiecare blog-card intră cu delay incremental */
.blog .blog-card {
  opacity: 0;
  transform: translateX(30px);
  transition: all 1.2s ease;
}

.blog.show .blog-card:nth-child(1) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.8s;
}

.blog.show .blog-card:nth-child(2) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 1s;
}

.blog.show .blog-card:nth-child(3) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 1.2s;
}

.blog.show .blog-card:nth-child(4) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 1.4s;
}


.blog :is(.section-subtitle, .section-title, .section-text) { text-align: center; }



.blog .section-text { margin-block: 20px 50px; }



.blog-card .card-content { position: relative; }



.blog-card .card-meta {

background-color: var(--prussian-blue);

color: var(--white);

text-align: center;

font-size: var(--fs-5);

font-family: var(--ff-oswald);

font-weight: var(--fw-600);

line-height: 1.5;

max-width: max-content;

margin-inline: auto 20px;

margin-block: -80px 20px;

padding: 20px 25px;

box-shadow: -8px 8px 0 var(--dark-orange);

}



.blog-card .card-meta .span {

color: var(--dark-orange);

font-size: var(--fs-3);

font-weight: var(--fw-700);

line-height: 0.75;

}



.blog-card .card-text { margin-block: 15px; }



.card-banner {

width: 100%;

max-width: 100%;

overflow: hidden;

}



.card-banner img {

width: 100%;

height: auto;

display: block;

object-fit: cover; /* păstrează proporțiile și taie partea care depășește */

}

.newsletter-content {

display: flex;

flex-direction: column; /* titlu deasupra butonului */

align-items: flex-start; /* aliniază tot la stânga containerului */

padding-left: 80px; /* mută tot conținutul spre dreapta */

}
.newsletter .newsletter-content,
.newsletter .newsletter-banner {
  opacity: 0;
  transform: translateX(50px); /* start din dreapta */
  transition: all 1.2s ease;
}
.newsletter-banner img {
  display: block;
  max-width: 100%;
  height: auto;

  /* Efect wavy */
  animation: wavy-img 3s ease-in-out infinite;
}

@keyframes wavy-img {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(0px);
  }
  75% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* când intră în vizor */
.newsletter.show .newsletter-content,
.newsletter.show .newsletter-banner {
  opacity: 1;
  transform: translateX(0);
}

/* optional: delay pentru titlu și buton */
.newsletter.show .section-title {
  transition-delay: 0.2s;
}

.newsletter.show .newsletter-btn {
  transition-delay: 0.4s;
}


.newsletter-btn {
  display: inline-block;
  padding: 12px 24px;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s ease;

  /* Efect wavy */
  animation: wavy-btn 2.5s ease-in-out infinite;
}



color: #fff; /* textul butonului */

border-radius: 6px;

border: 1px solid #ff7f00; /* border portocaliu */

}





/*-----------------------------------*\

#NEWSLETTER

\*-----------------------------------*/



.newsletter { background-color: var(--dark-orange); }



.newsletter .img-holder {

background-color: transparent;

margin-block-end: 20px;

max-width: max-content;

}



.newsletter .section-title { margin-block-end: 20px; }



.email-field {

background-color: var(--white);

color: var(--eerie-black);

font-size: var(--fs-9);

height: 65px;

padding-inline: 20px;

margin-block-end: 10px;

outline: none;

transition: var(--transition);

}



.email-field:focus { box-shadow: 0 2px 2px hsla(0, 0%, 0%, 0.4); }



.newsletter-btn {

background-color: var(--prussian-blue);

color: var(--white);

font-family: var(--ff-oswald);

font-weight: var(--fw-700);

padding: 8px 20px;

}
section.newsletter {
 background-color: var(--dark-orange);
  background-image: url('./assets/images/your-orange-background.jpg'); /* dacă vrei poza */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  padding: 60px 20px;
}

/* Container pentru imagine + conținut */
.newsletter-banner-container {
  display: flex;
  align-items: center; /* centru vertical */
  gap: 40px; /* spațiu între imagine și conținut */
  flex-wrap: wrap; /* responsive */
  justify-content: center;
  position: relative;
}

/* Imagine wavy */
.newsletter-banner img {
  display: block;
  max-width: 100%;
  height: auto;
  animation: wavy-img 3s ease-in-out infinite;
}

@keyframes wavy-img {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-5px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(5px); }
}

/* Text wavy (pe litere individuale) */
.wavy-text span {
  display: inline-block;
  animation: wavy-text 1.5s ease-in-out infinite;
}

@keyframes wavy-text {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-4px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(4px); }
}

/* Buton wavy */
.newsletter-btn {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 24px;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
  position: relative; /* important ca mișcarea să nu afecteze layout */
  animation: wavy-btn 2.5s ease-in-out infinite;
  transition: background-color 0.3s ease;
}

.newsletter-btn:hover {
  background-color: #0056b3;
}

@keyframes wavy-btn {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-3px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(3px); }
}









/*-----------------------------------*\

#FOOTER

\*-----------------------------------*/



.footer {
  opacity: 0;
  transform: translateY(50px); /* start din jos */
  transition: all 2.1s ease;
    background-color: white;

}

/* când intră în vizor */
.footer.show {
  opacity: 1;
  transform: translateY(0);
}



.footer-top {

display: grid;

gap: 40px;

}



.footer .logo {

color: var(--prussian-blue);

font-weight: var(--fw-800);

font-size: 3.2rem;

}



.footer-text { margin-block: 10px 30px; }



.social-list {

display: flex;

gap: 10px;

}

.social-lists {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px; /* Adaugă spațiu sub listă */
}

.social-link {

background-color: var(--indigo-dye);

color: var(--white);

font-size: 20px;

padding: 12px;

transition: var(--transition);

}



.social-link:is(:hover, :focus) { background-color: var(--prussian-blue); }



.footer-list-title {

font-size: var(--fs-6);

max-width: max-content;

padding-block-end: 10px;

border-block-end: 3px solid var(--dark-orange);

margin-block-end: 20px;

}



.footer-link { padding-block: 6px; }



.footer-bottom {

padding-block: 40px;

border-block-start: 1px solid var(--prussian-blue);

font-size: var(--fs-9);

color: var(--indigo-dye);

}



.copyright-link { display: inline-block; }











/*-----------------------------------*\

#BACK TO TOP

\*-----------------------------------*/



.back-top-btn {

position: fixed;

bottom: 10px;

right: 20px;

background-color: var(--eerie-black);

color: var(--white);

font-size: 20px;

padding: 10px;

z-index: 3;

opacity: 0;

visibility: hidden;

transition: var(--transition);

}



.back-top-btn.active {

opacity: 1;

visibility: visible;

transform: translateY(-10px);

}

.project-card {

overflow: hidden; /* pentru ca poza mărită să nu depășească cardul */

border-radius: 8px; /* opțional, rotunjirea colțurilor */

}



.project-card img {

transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;

}



.project-card:hover img {

transform: scale(1.05);

box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* ridicare vizuală */

}

.footer-list .footer-link {

display: inline-block; /* permite transform */

transition: transform 0.2s ease, color 0.2s ease; /* animație smooth */

color: #000; /* culoarea inițială: negru */

text-decoration: none;

}



.footer-list .footer-link:hover {

transform: scale(1.05); /* zoom mic */

color: orange; /* culoare la hover */

}







/*-----------------------------------*\

#MEDIA QUERISE

\*-----------------------------------*/



/**

* responsive for larger than 540px screen

*/



@media (min-width: 540px) {



/**

* REUSED STYLE

*/



.btn {

font-size: var(--fs-7);

padding-inline: 30px 60px;

}







/**

* HEADER

*/



.header-contact {

color: var(--white);

display: flex;

align-items: center;

gap: 20px;

text-align: right;

line-height: 1.2;

margin-inline-start: auto;

}



.header .contact-label {

text-transform: uppercase;

font-size: var(--fs-9);

}



.header .contact-number {

font-size: var(--fs-6);

font-weight: var(--fw-600);

letter-spacing: 1px;

}



.header .contact-icon {

font-size: 35px;

opacity: 0.6;

}







/**

* ABOUT

*/



.about .abs-img-2 {

display: block;

position: absolute;

width: 400px;

bottom: 0;

left: 50px;

z-index: -1;

}



.about .abs-img-1 { right: -200px; }



}











/**

* responsive for larger than 640px screen

*/



@media (min-width: 640px) {



/**

* REUSED STYLE

*/



.h1 { --fs-3: 5rem; }



.container {

max-width: 540px;

width: 100%;

margin-inline: auto;

}







/**

* HEADER

*/



.header .container { max-width: unset; }



.header .logo { font-size: 3.5rem; }







/**

* HERO

*/



.hero {
    justify-content: flex-start;
    padding-bottom: 200px;
    align-items: flex-start;
}



.hero .shape-1 { left: 45px; }

.text-background {
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px 15px;
    border-radius: 5px;
    display: inline-block; /* Fă din el un element de tip "inline-block" */
}
.hero-content {
     background-color: transparent;
     text-align: left;
     position: relative;
     top: -100px;
 }

.btn-container {
    width: 100%;
    display: flex; /* Activează Flexbox pe container */
    justify-content: center; /* Centrează elementele din interior pe orizontală */
    margin-top: 20px;
}
.btn-outline {
    /* Stiluri pentru a-i da un fundal vizibil, similar cu cel al textului */
    background-color: rgba(0, 0, 0, 0.6); /* Fundal negru, 60% opacitate */
    color: white; /* Culoarea textului din buton, pentru vizibilitate */
    border: none; /* Elimină conturul dacă nu-l dorești */
    border-radius: 5px; /* Colțuri rotunjite */
    padding: 10px 20px; /* Adaugă spațiu în interiorul butonului */
    text-decoration: none; /* Asigură că linkul nu are o linie dedesubt */
}
.hero-title .span { --fs-2: 6rem; }



.hero-text { max-width: 30ch; }



.btn-outline { margin-inline: 0; }

}
/**

* responsive for larger than 768px screen

*/
@media (min-width: 768px) {



/**

* REUSED STYLE

*/



.container { max-width: 720px; }


.h1 { --fs-3: 6rem; }

.grid-list { grid-template-columns: 1fr 1fr; }

/**

* HERO

*/



.hero-title .span { --fs-2: 7rem; }



.hero-text {

font-size: var(--fs-7);

max-width: 40ch;

margin-block-end: 40px;

}



.btn-outline {

font-size: var(--fs-7);

padding: 12px 30px;

}







/**

* FEATURES

*/

.feature-card::before { --fs-1: 10rem; }

/**

* PROJECT

*/

.project-list { gap: 80px; }



.project-item { min-width: calc(50% - 40px); }

/**

* NEWSLETTER

*/
.newsletter { margin-block-start: 110px; }



.newsletter .container { position: relative; }



.newsletter .newsletter-banner {

position: absolute;

bottom: -50px;

left: 0;

margin-block-end: 0;

}



.newsletter-content {

max-width: 355px;

margin-inline-start: auto;

}



.newsletter .section-title { --fs-4: 4rem; }



.newsletter-btn {

font-size: var(--fs-5);

padding: 10px 30px;

}
/**

* FOOTER

*/



.footer-top { grid-template-columns: 1fr 1fr; }



}

/**

* responsive for larger than 992px screen

*/

@media (min-width: 992px) {

/**

* CUSTOM PROPERTY

*/
:root {
/**

* typography

*/



--fs-4: 4.5rem;



/**

* spacing

*/



--section-padding: 120px;



}







/**

* REUSED STYLE

*/


.container { max-width: 960px; }



.h1 { --fs-3: 10rem; }



.section-subtitle { --fs-6: 3rem; }



.section-text {

max-width: 70ch;

margin-inline: auto;

}



.grid-list { grid-template-columns: repeat(3, 1fr); }







/**

* HEADER

*/


.nav-open-btn,

.navbar-top,

.navbar-link > ion-icon { display: none; }

.navbar,

.navbar.active { all: unset; }



.navbar-list {

display: flex;

gap: 5px;

}


.navbar-item:not(:last-child) { border-block-end: none; }



.navbar-link { color: var(--white); }



.navbar-link:is(:hover, :focus) { background-color: transparent; }



.header-contact { margin-inline-start: 0; }







/**

* HERO

*/


.hero { grid-template-columns: 1fr; }



.hero-content { padding: 0; }



.hero-title .span { --fs-2: 12rem; }







/**

* ABOUT

*/



.about .container {

display: grid;

grid-template-columns: 1fr 1fr;

align-items: center;

gap: 30px;

}



.about-banner { margin-block-end: 0; }



.about .abs-img-1 { right: -100px; }



.about :is(.section-title, .section-text) { margin-block-end: 35px; }







/**

* FEATURE

*/



.feature .title-wrapper {

display: grid;

grid-template-columns: 1fr 1fr;

align-items: center;

justify-items: self-end;

}



.feature .section-text { margin-block-end: 0; }



.feature-list { margin-block-start: 120px; }



.feature-card { padding-block-start: 80px; }



.feature-card::before {

--fs-1: 16rem;

position: absolute;

top: -90px;

left: 20px;

}







/**

* PROJECT

*/



.project-item { min-width: calc(33.33% - 53.33px); }







/**

* .

*/



.blog-list { grid-template-columns: 1fr 1fr; }







/**

* NEWSLETTER

*/



.newsletter { padding-block: 30px; }



.newsletter .newsletter-banner { bottom: -30px; }



.newsletter-content {

max-width: 600px;

display: grid;

grid-template-columns: 1fr 1fr;

}







/**

* FOOTER

*/



.footer-top {

grid-template-columns: repeat(4, 1fr);

justify-items: self-end;

}



.copyright { text-align: center; }



}











/**

* responsive for larger than 1200px screen

*/



@media (min-width: 1200px) {



/**

* REUSED STYLE

*/



.container { max-width: 1180px; }



.h1 { --fs-3: 12rem; }







/**

* HEADER

*/



.header .contact-number { --fs-6: 3rem; }







/**

* HERO

*/



.hero {

padding-block-start: 150px;

background-position: left;

}



.hero-title .span { --fs-2: 14rem; }



.hero-text { --fs-7: 2.4rem; }







/**

* ABOUT

*/



.about-banner { max-width: 370px; }



.about .abs-img-2 { width: max-content; }







/**

* NEWSLETTER

*/



.newsletter-content {

max-width: 840px;

grid-template-columns: 0.8fr 1fr;

}







/**

* FOOTER

*/



.footer-top { padding-block: 60px; }



}

.zone {

/* poate ai padding și background */

padding: 100px 0;

background-color: #ffffff;

}



/* alias pentru lista și cardurile de zone ca să preia stilurile vechi de la feature */

.zone-list {

display: grid;

gap: 30px;

grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

list-style: none;

margin: 0;

padding: 0;

align-items: stretch; /* face toate cardurile la aceeași înălțime */

}



.zone-card {

background: #fff;

padding: 100px;

border-radius: 12px;

box-shadow: 0 6px 20px rgba(0,0,0,0.05);

display: flex;

flex-direction: column;

justify-content: space-between; /* sau center dacă vrei conținutul vertical centrat */

height: 100%; /* forțează să umple spațiul din grid */
animation: wavy 3s ease-in-out infinite;
}
@keyframes wavy {
  0% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(0px);
  }
  75% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0px);
  }
}
.zone .title-wrapper > div {

text-align: center;

}
/* animare doar pentru zone-content */
.zone .container > * {
  opacity: 0;
  transform: translateX(50px); /* start din dreapta */
  transition: all 1.2s ease;
}

/* când intră în vizor */
.zone.show .container > * {
  opacity: 1;
  transform: translateX(0);
}

/* escalonare pentru titlu și carduri */
.zone .section-subtitle {
  transition-delay: 0.2s;
}
.section-subtitle {
  text-align: center;
}
.zone .section-title {
  transition-delay: 0.4s;
}

.zone .zone-card {
  opacity: 0;
  transform: translateX(50px); /* start din dreapta */
  transition: all 1.2s ease;
}

/* când intră în vizor */
.zone.show .zone-card {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.6s; /* sau se poate incrementa per card pentru efect escalonat */
}


/* Centrare conținut card */

.zone-card {

display: flex;

flex-direction: column;

align-items: center; /* centrează tot ce e în card pe orizontală */

text-align: center; /* centrează textul */

}

.zone .title-wrapper {

margin-bottom: 40px; /* ajustează valoarea după cum vrei spațiul */

}

.zone-card {

background: #fff;

padding: 30px;

border-radius: 12px;

box-shadow: 0 6px 20px rgba(0,0,0,0.05);

position: relative;

border: 3px solid transparent; /* contur inițial invizibil */

transition: border-color 0.3s ease, transform 0.3s ease; /* efect la hover */

}



.zone-card:hover {

border-color: orange; /* contur portocaliu la hover */

transform: translateY(-5px); /* efect ușor de ridicare */

}

.theme-switch-wrapper {

display: flex;

align-items: center;

margin-left: 20px; /* spațiu față de link-uri */

}



.theme-switch {

position: relative;

display: inline-block;

width: 60px;

height: 30px;

}



.theme-switch input {

opacity: 0;

width: 0;

height: 0;

}



/* Fundal slider și tranziție între iconuri */

/* Iconuri soare și lună */

.slider .icon {

position: absolute;

top: 50%;

transform: translateY(-50%);

font-size: 16px;

pointer-events: none;

transition: opacity 0.4s, color 0.4s;

color: var(--white);

}

.slider .icon ion-icon {

color: #fff; /* alb */

font-size: 20px; /* poți ajusta la 28px dacă vrei mai mare */

}
.icon {
  font-size: 24px;
  transition: color 0.3s;
}

.icon.sun { color: #ffffff; } /* alb normal */
.icon.moon { color: #cccccc; } /* alt alb */

.icon:hover {
 --ionicon-color: orange;
}
.slider .sun {

left: 8px;

opacity: 1; /* soarele evidențiat inițial (light mode) */

}



.slider .moon {

right: 8px;

opacity: 0.5; /* luna estompată inițial */

}



/* Dark mode activ (toggle checked) */

input:checked + .slider .sun {

opacity: 0.5; /* soarele estompat */

}



input:checked + .slider .moon {

opacity: 1; /* luna evidențiată */

}

@keyframes moveLine {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Culori iconuri optional */

body.dark-mode .slider .sun {

color: #fff; /* soarele estompat în dark mode */

}



body.dark-mode .slider .moon {

color: #ffc600; /* luna evidențiată cu galben */

}

/* dark mode pentru pagină */

/* FUNDAL GENERAL */

body.dark-mode {

background-color: #0d1b2a; /* albastru închis general */

color: var(--white);

}



/* HEADER */

.header.dark-mode {

background-color: var(--prussian-blue);

}

body.dark-mode .h2 {

color: var(--light-gray);

}

/* FOOTER */

.footer.dark-mode {

background-color: #1f2a40; /* aproape negru, dar diferit de secțiuni */

color: var(--white);

}



/* SECTIUNI */

body.dark-mode .hero {

background-color: #0d1b2a; /* albastru foarte închis */

color: var(--white);

}



body.dark-mode .about {

background-color: #131f34; /* albastru median */

color: var(--white);

}



body.dark-mode .service {

background-color: #1b263b; /* albastru închis diferit */

color: var(--white);

}



body.dark-mode .project {

background-color: #162447; /* alt albastru închis */

color: var(--white);

}



body.dark-mode .zone {

background-color: #1b2431; /* secțiuni locations */

color: var(--white);

}



/* LINK-URI */

body.dark-mode .section a,

body.dark-mode .footer a {

color: var(--dark-orange);

}



/* CARDURI */

body.dark-mode .service-card,

body.dark-mode .project-card,

body.dark-mode .zone-card {

background-color: #252c3c; /* mai închis decât secțiunea */

color: var(--white);

}



body.dark-mode .service-card .card-title,

body.dark-mode .service-card .card-text,

body.dark-mode .project-card .card-title,

body.dark-mode .project-card .card-text,

body.dark-mode .zone-card .card-title,

body.dark-mode .zone-card .card-text {

color: var(--white);

}



/* TOOLTIP ZONE */

body.dark-mode #zone-tooltip,

body.dark-mode #zone-tooltip * {

background-color: #252c3c !important;

color: var(--white) !important;

border-color: var(--dark-orange) !important;

}
.Posts .container > * {
  opacity: 0;
  transform: translateX(-50px); /* start din stânga */
  transition: all 1.2s ease;
}

/* când intră în vizor */
.Posts.show .container > * {
  opacity: 1;
  transform: translateX(0);
}

/* escalonare pentru subtitlu, titlu și text */
.Posts .section-subtitle {
  transition-delay: 0.2s;
}

.Posts .section-title {
  transition-delay: 0.4s;
}

.Posts .section-text {
  transition-delay: 0.6s;
}

/* fiecare posts-card intră cu delay incremental */
.Posts .posts-card {
  opacity: 0;
  transform: translateX(-30px);
  transition: all 1.2s ease;
}

.Posts.show .posts-card:nth-child(1) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.8s;
}

.Posts.show .posts-card:nth-child(2) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 1s;
}

.Posts.show .posts-card:nth-child(3) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 1.2s;
}
.Posts { background-color: var(--alice-blue); }



.Posts :is(.section-subtitle, .section-title, .section-text) { text-align: center; }



.Posts .section-text { margin-block: 20px 50px; }



.blog-card .card-content { position: relative; }



.blog-card .card-meta {

background-color: var(--prussian-blue);

color: var(--white);

text-align: center;

font-size: var(--fs-5);

font-family: var(--ff-oswald);

font-weight: var(--fw-600);

line-height: 1.5;

max-width: max-content;

margin-inline: auto 20px;

margin-block: -80px 20px;

padding: 20px 25px;

box-shadow: -8px 8px 0 var(--orange-soda);

}



.blog-card .card-meta .span {

color: var(--dark-orange);

font-size: var(--fs-3);

font-weight: var(--fw-700);

line-height: 0.75;

}



.blog-card .card-text { margin-block: 15px; }



.card-banner {

width: 100%;

max-width: 100%;

overflow: hidden;

}



.card-banner img {

width: 100%;

height: auto;

display: block;

object-fit: cover;

}
.logo-desktop {
  display: none; /* Ascunde logo-ul de desktop pe mobil */
}

.logo-mobile {
  display: inline; /* Afișează logo-ul de mobil pe mobil */
}
@media (min-width: 992px) {
  .logo-mobile {
    display: none;
  }
  .logo-desktop {
    display: inline;
  }
}


/* Stiluri pentru meniul de mobil (se aplică doar la ecrane de maxim 991px) */
@media (max-width: 991px) {
  .navbar.active {
    background-color: var(--white) !important;
  }
  .navbar-list {
    background-color: var(--white) !important;
  }
  .navbar-list a.navbar-link {
    color: var(--black) !important;
    background-color: transparent !important;
  }
  .navbar-list ion-icon {
    color: var(--black) !important;
  }

  /* Adăugare pentru logo-ul de pe mobil în dark mode */
  body.dark-mode .logo-mobile {
    color: var(--black) !important;
  }
  .header .logo {
    font-size: 1.8rem; /* Poți ajusta această valoare. */
  }
}
body.dark-mode .Posts {

background-color: var(--prussian-blue);

}
body.dark-mode .posts-card .card-title,
body.dark-mode .posts-card .card-title a {
  background-color: transparent !important;
  color: var(--black) !important;
}
body.dark-mode .posts-card .card-title:hover {
  background-color: transparent !important;
  color: var(--black) !important;
}
/* Și titlurile vor fi gri deschis în dark mode, la fel ca la services */

body.dark-mode .Posts .h2 {

color: var(--light-gray);

}

.blog-card .blog-img-contain {

width: 100%;

height: 100%;

object-fit: contain; /* Aceasta e modificarea esențială */

}-shadow-1: 2px 0 50px hsla(0, 0%, 0%, 0.2);
.section {
  padding: 40px 0;
}

.contact-section {
  padding: 60px 0;
  background-color: AliceBlue; /* Light mode default */
}

body.dark-mode .contact-section {
  background-color: #18233C; /* Dark mode */
}

.contact-section .container {
  max-width: 800px;
  margin: 0 auto;
}

.contact-section .section-title {
  text-align: center;
  margin-bottom: 10px;
}

.contact-section .section-text {
  text-align: center;
  margin-bottom: 40px;
  color: var(--sonic-silver);
}

body.dark-mode .contact-section .section-text {
  color: #cdd9f0; /* deschis, vizibil pe fundal închis */
}

.contact-form {
  display: grid;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group .form-label {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--eerie-black);
  margin-bottom: 5px;
}

body.dark-mode .form-group .form-label {
  color: var(--white);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--light-gray);
  border-radius: 8px;
  font-size: 1.6rem;
  font-family: 'Rubik', sans-serif;
  color: var(--eerie-black);
  background-color: var(--white);
  transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--orange-soda);
}

body.dark-mode .form-group input,
body.dark-mode .form-group textarea {
  background-color: #2e2e4e;
  color: var(--white);
  border-color: #555577;
}

body.dark-mode .form-group input::placeholder,
body.dark-mode .form-group textarea::placeholder {
  color: #a0a0b0;
}

.form-group textarea {
  resize: vertical;
}
.form-btn {
  background-color: #2c2c2c;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s ease;
  position: relative; /* Spune browserului să folosească Z-INDEX */
  z-index: 9999;      /* Pune butonul deasupra oricărui alt element */
}
#contact-form, 
.form-btn {
    pointer-events: auto !important; 
}

.form-btn:hover {
  background-color: #1e1e1e;
}
body.dark-mode .form-btn {
  background-color: #FFA733; /* sau #FFA500 direct */
  color: var(--white);
}

body.dark-mode .form-btn:hover {
  background-color: #FF6A00;
  color: var(--orange-soda);
}
/* =======================
   #FAQ
======================= */
.faq {
  background-color: var(--white);
  text-align: center;
}
.faq-carousel {
  display: flex;
  overflow-x: auto;
  gap: 20px;
  scroll-snap-type: inline mandatory;
  padding: 30px 0;
}
.faq-card {
  flex: 0 0 60%;
  max-width: 500px;
  background: white;
  padding: 25px;
  border-radius: 12px;
  scroll-snap-align: start;
  border: 1px solid var(--light-gray);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 280px;
  justify-content: center;
  margin: 0 auto;
}
.faq-question {
  background: var(--prussian-blue);
  color: white;
  padding: 12px;
  border-radius: 8px;
  text-align: left;
  font-weight: bold;
}
.faq-answer {
  background: var(--alice-blue);
  color: var(--onyx);
  padding: 12px;
  border-radius: 8px;
  text-align: left;
}

/* =======================
   #Responsive
======================= */
@media (max-width: 768px) {
  .review-card,
  .faq-card {
    flex: 0 0 80%;
    min-height: 250px;
  }
}
.review-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 15px auto;
  border: 2px solid var(--dark-orange);
}

/* Social buttons */
.review-socials {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
}

.social-btn {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: bold;
  color: white;
  transition: background 0.3s ease;
}

.social-btn.insta { background: #E4405F; }
.social-btn.insta:hover { background: #c12d4a; }

.social-btn.fb { background: #1877F2; }
.social-btn.fb:hover { background: #0f5dc8; }
/* Reviews Carousel */
.reviews-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reviews-carousel {
  display: flex;
  width: 100%;
  max-width: 600px;
  overflow: hidden;
}

.review-card {
  flex: 0 0 100%;
  display: none; /* ascundem, doar unul vizibil */
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Butoane next/prev */
.carousel-btn {
  background: var(--dark-orange);
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 24px;
  border-radius: 50%;
  transition: 0.3s;
}
.carousel-btn:hover { background: #d35400; }

.prev { position: absolute; left: -50px; }
.next { position: absolute; right: -50px; }

/* Dots */
.carousel-dots {
  text-align: center;
  margin-top: 15px;
}
.dot {
  height: 12px;
  width: 12px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  transition: background 0.3s;
}
.dot.active, .dot:hover { background-color: var(--dark-orange); }
.reviews .section-title,
.reviews .section-subtitle {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
/* =======================
   #COOKIE MODAL
======================= */
.cookie-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75); /* fundal opac */
  display: none; /* ascuns implicit */
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.cookie-content {
  background: white;
  padding: 30px;
  border-radius: 12px;
  max-width: 400px;
  text-align: center;
  box-shadow: var(--shadow-2);
  animation: fadeIn 0.5s ease;
}

.cookie-content h3 {
  margin-bottom: 10px;
  color: var(--prussian-blue);
}

.cookie-content p {
  font-size: var(--fs-7);
  margin-bottom: 20px;
  color: var(--onyx);
}

.cookie-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.btn-accept {
  background: var(--dark-orange);
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}
.btn-accept:hover { background: #d35400; }

.btn-decline {
  background: var(--light-gray);
  color: var(--onyx);
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}
.btn-decline:hover { background: #aaa; }

/* Mic efect */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* =======================
   #NO HORIZONTAL SCROLL
======================= */
html, body {
  max-width: 100%;
  overflow-x: hidden; /* blochează scroll pe orizontală */
}
/* =======================
   #REVIEWS
   ======================= */
.reviews {
  background-color: var(--white);
  padding-block: 60px;
}

.reviews .section-subtitle,
.reviews .section-title,
.reviews .section-text {
  text-align: center;
}

.reviews-list {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  list-style: none;
  margin: 30px 0 0 0;
  padding: 0;
}

/* Card */
.review-card {
  background: var(--white);
  padding: 18px;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(3, 18, 31, 0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  transition: transform .22s ease, box-shadow .22s ease;
  border: 1px solid rgba(0,0,0,0.04);
}

.review-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(3, 18, 31, 0.09);
}

/* Top row: photo + name + stars */
.review-top {
  display: flex;
  gap: 12px;
  align-items: center;
}

.client-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 80px;
  background: var(--light-gray);
  border: 3px solid var(--cultured-3);
}

.client-photo .img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.client-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.client-name {
  font-size: 1.6rem;
  margin: 0;
  color: var(--prussian-blue);
  font-weight: 600;
}

/* Stars */
.stars {
  font-size: 1.3rem;
  color: #e0a800; /* gold-ish */
  line-height: 1;
}
.star { opacity: .35; }
.star.filled { opacity: 1; }

/* review text */
.review-text {
  color: var(--onyx);
  font-size: 1.45rem;
  margin: 0;
  line-height: 1.5;
  flex-grow: 1;
}

/* social icons row */
.review-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.social-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--alice-blue);
  color: var(--prussian-blue);
  text-decoration: none;
  transition: transform .18s ease, background .18s ease;
  font-size: 1.4rem;
}

.social-btn:hover { transform: translateY(-3px); background: var(--dark-orange); color: white; }

/* responsive tweaks */
@media (max-width: 640px) {
  .client-photo { width: 64px; height: 64px; flex: 0 0 64px; }
  .client-name { font-size: 1.4rem; }
  .stars { font-size: 1.1rem; }
}
/* =======================
   #ROUTES WITH CARDS
======================= */
.route-block {
  margin-bottom: 40px;
}

.route-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--prussian-blue);
  margin-bottom: 15px;
  text-align: center;
}

.route-cards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.zone-card.small {
  background: var(--white);
  padding: 12px;
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
  width: 120px;
  text-align: center;
  transition: transform 0.2s ease;
}

.zone-card.small:hover {
  transform: translateY(-4px);
}

.zone-card.small .card-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 8px;
}

.zone-card.small .card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.zone-card.small .card-title {
  font-size: 1.4rem;
  margin: 0;
  color: var(--onyx);
}

.route-arrow {
  font-size: 2.4rem;
  color: var(--dark-orange);
}
#zones .section-subtitle,
#zones .section-title,
#zones .section-text {
  text-align: center;
}
#zones .route-block {
    margin: 18px 0;
    padding: 14px;
    border-radius: 10px;
    background: var(--white, #fff);
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  }
  #zones .route-title { font-size: 1.3rem; margin-bottom: 10px; color: var(--prussian-blue); text-align:center; }
  #zones .route-cards {
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
  }
  #zones .zone-card.small {
    width:120px;
    padding:10px;
    border-radius:8px;
    text-align:center;
    background: #fff;
    box-shadow: 0 6px 14px rgba(0,0,0,0.04);
  }
  #zones .card-icon { width:64px; height:64px; margin: 0 auto 8px; }
  #zones .card-icon img { width:100%; height:100%; object-fit:contain; display:block; }
  #zones .card-title { margin: 0; font-size:1rem; font-weight:600; color:var(--onyx); }
  #zones .route-arrow { font-size:1.4rem; color:var(--dark-orange); font-weight:700; margin:0 6px; }

  /* Extra routes hidden by default via max-height */
  #extra-routes { max-height: 0; overflow: hidden; transition: max-height 0.45s ease; }
  /* when expanded - allow enough space */
  #zones.routes-expanded #extra-routes { max-height: 2000px; }

  /* Button */
 .routes-btn-wrapper {
   display:flex;
   justify-content:center;
   margin-top:28px;   /* mai mult spațiu sus */
 }

 .routes-btn {
   background: var(--dark-orange, #ff6600);
   color: #fff;
   border: none;
   padding: 16px 36px;   /* mai lat și mai înalt */
   border-radius: 12px;  /* colțuri mai rotunjite */
   font-weight: 700;
   cursor: pointer;
   font-size: 1.2rem;    /* text mai mare */
   box-shadow: 0 6px 18px rgba(0,0,0,0.15); /* umbră pentru evidențiere */
   transition: background 0.3s ease, transform 0.2s ease;
 }

 .routes-btn:hover {
   background: #e65c00;   /* nuanță mai închisă */
   transform: translateY(-2px); /* efect de ridicare */
 }

 .routes-btn[aria-expanded="true"] {
   background: var(--prussian-blue, #123456);
 }
  /* Responsive */
  @media (max-width:720px) {
    #zones .zone-card.small { width:92px; padding:8px; }
    #zones .card-icon { width:52px; height:52px; }
    #zones .route-title { font-size:1.05rem; }
  }
  /* Card mare pentru rute */
  #zones .route-block {
    margin: 28px 0;
    padding: 28px;
    border-radius: 14px;
    background: var(--white, #fff);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  #zones .route-block:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  }

  /* Titlu rută */
  #zones .route-title {
    font-size: 1.6rem;
    margin-bottom: 20px;
    color: var(--prussian-blue, #123456);
    font-weight: 700;
  }

  /* Carduri mici (statele) */
  #zones .route-cards {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
  }

  #zones .zone-card.small {
    width: 150px;
    padding: 16px;
    border-radius: 12px;
    background: #fdfdfd;
    box-shadow: 0 6px 16px rgba(0,0,0,0.06);
    transition: transform 0.2s ease;
  }

  #zones .zone-card.small:hover {
    transform: scale(1.05);
  }

  #zones .card-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 12px;
  }

  #zones .card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  #zones .card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--onyx, #333);
  }

  /* Săgețile între carduri */
  #zones .route-arrow {
    font-size: 2rem;
    color: var(--dark-orange, #ff6600);
    font-weight: bold;
  }
.flip-card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
   margin-top: 40px;
}

.flip-card {
  background-color: transparent;
  width: 220px;   /* pătrat */
  height: 220px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid var(--dark-orange);
  border-radius: 12px;
  box-sizing: border-box;
  padding: 20px;
}

.flip-card-front {
  background-color: var(--prussian-blue);
  color: #fff;
  text-align: center;
}

.flip-card-front img {
  width: 60px;
  margin-bottom: 15px;
}

.flip-card-back {
  background-color: var(--dark-orange);
  transform: rotateY(180deg);
  color: #fff;
  font-size: 1.2rem;
  text-align: center;
  line-height: 1.4;
}

/* responsive */
@media (max-width: 576px) {
  .flip-card {
    width: 160px;
    height: 160px;
  }
}
.flip-card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.flip-card {
  background-color: transparent;
  width: 220px;   /* pătrat */
  height: 220px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid var(--dark-orange);
  border-radius: 12px;
  box-sizing: border-box;
  padding: 20px;
}

.flip-card-front {
  background-color: var(--prussian-blue);
  color: #fff;
  text-align: center;
}

.flip-card-front img {
  width: 60px;
  margin-bottom: 15px;
}

.flip-card-back {
  background-color: var(--dark-orange);
  transform: rotateY(180deg);
  color: #fff;
  font-size: 1.2rem;
  text-align: center;
  line-height: 1.4;
}

/* responsive */
@media (max-width: 576px) {
  .flip-card {
    width: 160px;
    height: 160px;
  }
}
.section.advantages {
  background-color: aliceblue; /* fundalul sectiunii */
  padding: 60px 20px;          /* spatiu sus-jos */
  text-align: center;          /* centreaza textul */
}

.section.advantages .section-subtitle,
.section.advantages .section-title {
  text-align: center;          /* sigur text centrat */
}
/* container timeline + poza */
.advantages-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 60px;
    margin-top: 40px;
}

/* timeline */
.timeline {
  position: relative;
  flex: 1;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 40px;            /* mutăm linia un pic mai la dreapta */
  top: 0;
  bottom: 0;
  width: 3px;            /* linia mai groasă */
  background: var(--dark-orange);
}

.timeline-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin-bottom: 60px;   /* mai mult spațiu între iteme */
  padding-left: 100px;   /* mai mult loc pt cerc mărit */
  text-align: left;
}

.timeline-icon {
  position: absolute;
  left: 0;
  width: 90px;           /* cerc mai mare */
  height: 90px;
  background: var(--prussian-blue);
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid var(--dark-orange); /* contur mai gros */
}

.timeline-icon img {
  width: 55px;           /* icon mai mare înăuntru */
  height: 55px;
  object-fit: contain;
}

.timeline-content h3 {
  margin: 0;
  font-size: 1.8rem;     /* titlu mai mare */
  color: var(--dark-orange);
}

.timeline-content p {
  margin: 8px 0 0;
  color: #333;
  font-size: 1.1rem;     /* text un pic mai mare */
  line-height: 1.6;
}
/* partea cu poza din dreapta */
.advantages-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.advantages-image img {
  max-width: 110%;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* responsive */
@media (max-width: 992px) {
  .advantages-top {
    flex-direction: column;
  }
  .advantages-image {
    margin-top: 30px;
  }
}
.advantages-top {
  flex-direction: row-reverse; /* inversează ordinea stânga/dreapta */
}
body.dark-mode .section.advantages {
  background-color: #1e1e1e; /* gri închis diferit */
  color: #f5f5f5;
}

body.dark-mode .timeline::before {
  background: var(--dark-orange);
}

body.dark-mode .timeline-icon {
  background: #2c2c2c;
  border-color: var(--dark-orange);
}

body.dark-mode .timeline-content p {
  color: #ccc;
}

body.dark-mode .flip-card-front {
  background-color: #2c2c2c;
  color: #fff;
}

body.dark-mode .flip-card-back {
  background-color: var(--dark-orange);
  color: #fff;
}
body.dark-mode .section.faq {
  background-color: #0d1b2a;
  color: #f0f0f0;
}

body.dark-mode .faq-item {
  background: #1b263b;
  border: 1px solid var(--dark-orange);
  color: #fff;
}

body.dark-mode .faq-item h3 {
  color: var(--dark-orange);
}
body.dark-mode .section.reviews {
  background-color: #0d1b2a;
  color: #f0f0f0;
}

body.dark-mode .review-card {
  background: #1b263b;
  border: 1px solid var(--dark-orange);
  color: #fff;
}

body.dark-mode .review-card h3 {
  color: var(--dark-orange);
}
/* WHO WE SERVE */
.section.who-we-serve {
  padding: 60px 20px;
  background-color: #fff; /* light mode default */
  text-align: center;
}

.who-we-serve .section-title {
  margin-bottom: 40px;
    color: var(--dark-orange); /* scrisul devine portocaliu */

}

.serve-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}

.serve-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: 0.3s ease;
}

.serve-card img {
  width: 60px;
  height: 60px;
  margin-bottom: 15px;
}

.serve-card p {
  font-weight: 600;
  color: var(--dark-orange);
}

/* Hover efect */
.serve-card:hover {
  background: var(--dark-orange);
  color: #fff;
}
.serve-card:hover p {
  color: #fff;
}

/* Dark mode */
body.dark-mode .section.who-we-serve {
  background-color: #1e2a38; /* culoarea pe care o vrei pentru dark mode */
}

body.dark-mode .serve-card {
  background: #243447;
  box-shadow: none;
}

body.dark-mode .serve-card p {
  color: var(--dark-orange);
}
::-webkit-scrollbar {
  width: 0px;
  background: transparent; /* ascunde bara */
}

/* Firefox */
html {
  scrollbar-width: none;
}
@media (max-width: 768px) {
  .advantages-top {
    flex-direction: column;   /* poza sus, timeline jos */
    align-items: center;
  }

  .advantages-image img {
    max-width: 90%;  /* poza mai mare */
    margin-bottom: 30px; /* spațiu între poză și timeline */
  }

  .timeline {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .flip-card {
    width: 90%;
    margin: 20px auto;
    perspective: 1000px;
  }

  .flip-card-inner {
    transition: transform 0.6s;
    transform-style: preserve-3d;
    position: relative;
    width: 100%;
    height: 220px;
  }

  .flip-card-front,
  .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
  }

  /* 🔹 Fața cardului (prima parte) */
  .flip-card-front {
    background: var(--aliceblue);
    color: var(--dark-orange) !important; /* text & icon portocaliu */
    border: 2px solid var(--dark-orange); /* cadru portocaliu */
  }

  /* 🔸 Spatele cardului */
  .flip-card-back {
    background: var(--dark-orange);
    color: #fff;
    transform: rotateY(180deg);
  }

  /* efect flip pe click */
  .flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
  }
}
body.no-scroll {
  overflow: hidden;
}
@media (max-width: 768px) {
  .navbar {
    max-width: 240px; /* în loc de 300px */
  }
  .navbar-link {
    padding: 12px; /* mai puțin padding ca să fie mai compact */
    font-size: 14px; /* text mai mic pe mobil */
  }
}
/* CONTACT SECTION */
.contact {
  background-color: var(--alice-blue);
  text-align: center;
}

.contact-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.contact-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: var(--white);
  border: 2px solid var(--dark-orange);
  padding: 12px 20px;
  border-radius: 8px;
  color: var(--prussian-blue);
  font-size: var(--fs-8);
  font-weight: var(--fw-600);
  transition: all 0.3s ease;
}

.contact-btn ion-icon {
  font-size: 22px;
  color: var(--dark-orange);
}

.contact-btn:hover {
  background-color: var(--dark-orange);
  color: var(--white);
}

.contact-btn:hover ion-icon {
  color: var(--white);
}

/* Stiluri speciale pentru rețele sociale */
.contact-btn.whatsapp { border-color: #25d366; }
.contact-btn.whatsapp ion-icon { color: #25d366; }
.contact-btn.whatsapp:hover { background-color: #25d366; }

.contact-btn.instagram { border-color: #e1306c; }
.contact-btn.instagram ion-icon { color: #e1306c; }
.contact-btn.instagram:hover { background-color: #e1306c; }

.contact-btn.facebook { border-color: #1877f2; }
.contact-btn.facebook ion-icon { color: #1877f2; }
.contact-btn.facebook:hover { background-color: #1877f2; }

/* CONTACT - DARK MODE */
.dark-mode .contact {
  background-color: var(--eerie-black); /* fundal întunecat */
  color: var(--white);
}

.dark-mode .contact-btn {
  background-color: var(--onyx);
  border-color: var(--dark-orange);
  color: var(--white);
}

.dark-mode .contact-btn ion-icon {
  color: var(--dark-orange);
}

.dark-mode .contact-btn:hover {
  background-color: var(--dark-orange);
  color: var(--white);
}

.dark-mode .contact-btn.whatsapp {
  border-color: #25d366;
}
.dark-mode .contact-btn.whatsapp ion-icon {
  color: #25d366;
}
.dark-mode .contact-btn.whatsapp:hover {
  background-color: #25d366;
  color: #fff;
}

.dark-mode .contact-btn.instagram {
  border-color: #e1306c;
}
.dark-mode .contact-btn.instagram ion-icon {
  color: #e1306c;
}
.dark-mode .contact-btn.instagram:hover {
  background-color: #e1306c;
  color: #fff;
}

.dark-mode .contact-btn.facebook {
  border-color: #1877f2;
}
.dark-mode .contact-btn.facebook ion-icon {
  color: #1877f2;
}
.dark-mode .contact-btn.facebook:hover {
  background-color: #1877f2;
  color: #fff;
}
/* ======================
   New Gallery Section
   ====================== */
.gallery {
  background-color: #dbeafe; /* nuanță între alb și aliceblue */
  padding: 60px 0;
  transition: background-color 0.3s ease;
}

/* păstrăm stilul consistent cu restul site-ului */
.gallery .section-subtitle {
  color: var(--dark-orange); /* portocaliu ca în restul */
  text-align: center;
}

.gallery .section-title {
  color: var(--oxford-blue);
  text-align: center;
}

.gallery .section-text {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 40px auto;
  color: var(--oxford-blue);
}

/* grid responsive */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.gallery-item {
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  background: #fff;
  transition: transform 0.3s ease;
}

.gallery-item:hover {
  transform: scale(1.03);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dark mode */
body.dark-mode .gallery {
  background-color: #1c1c1c; /* fundal închis */
}

body.dark-mode .gallery .section-subtitle {
  color: var(--dark-orange); /* păstrăm portocaliul */
}

body.dark-mode .gallery .section-title,
body.dark-mode .gallery .section-text {
  color: #fff;
}

body.dark-mode .gallery-item {
  background: #2a2a2a;
  box-shadow: 0 4px 12px rgba(255,255,255,0.05);
}
.gallery .section-title {
  color: var(--oxford-blue); /* la fel ca la celelalte secțiuni */
}
.back-footer-btn {
  position: fixed;
  bottom: 90px;          /* mai sus, cu spațiu față de Back to Top */
  right: 20px;
  width: 45px;
  height: 45px;
  background: #ff6600;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  z-index: 1000;
  transition: opacity 0.3s;
}

.back-footer-btn.hidden {
  opacity: 0;
  pointer-events: none;
}