/* RESET & BASE */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
	--dark: #0f172a;
	--accent: #e2f35e; 
	--blue: #2563eb;
	--muted: #94a3b8;
	--bg: #f1f5f9;
	--white: #ffffff;
	--font-main: 'Poppins', sans-serif;
}

html { scroll-behavior: smooth; }
body { 
	background-color: var(--bg); 
	color: var(--dark); 
	font-family: var(--font-main);
	overflow-x: hidden; 
}
.container { max-width: 1440px; margin: 0 auto; padding: 0 20px; }

img {max-width: 100%;}
/* TYPOGRAPHY */
h1 { font-size: clamp(36px, 5vw, 64px); line-height: 1.1; font-weight: 400; }
h1 strong { font-weight: 800; display: block; }
h2 { font-size: clamp(32px, 4vw, 56px); line-height: 1.2; font-weight: 400; }
p { line-height: 1.6; word-break: keep-all;}
.muted {color: var(--muted); margin-top: 21px;}
	
	
.btn-lime { 
	background: var(--accent); color: var(--dark); padding: 20px 45px; 
	text-decoration: none; font-weight: 700; border-radius: 12px; 
	display: inline-block; transition: 0.3s; border: none; cursor: pointer;
	font-size: inherit;
	font-family: inherit;
}

.btn-lime:hover {box-shadow: inset 0px 0px 10px #d3c600;}
	
#myBtn {
  display: none; /* ascuns inițial */
  position: fixed;
  width: 48px;
  height: 48px;
  bottom: 60px;
  right: 26px; /* fix în viewport */
  z-index: 9999;
  font-size: 18px;
  font-weight: 900;
  font-family: inherit;
  border: none;
  outline: none;
  background-color: var(--accent);
  color: var(--dark);
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
  line-height: 0;
  transition: transform .5s, opacity .3s;
  transform: none; /* important să nu fie niciun shift */
  opacity: 0; /* invizibil la load */
}

.wbs-page-content-error {
  background: var(--accent);
  padding: 21px;
  text-align: center;
 }	

/* HEADER */
.header-wrap{
  position: relative;
  width: 100%;
  overflow: hidden;
}
.wbs-header {	
  width: 100%;
  height: 96px;
  padding: 16px;
  position: fixed;
  z-index: 9999;
  top: 0px;
  opacity: 1;
  transition: .5s;
}
.wbs-header.hide {
opacity: 0;
top: -100px;
transition: .5s;
}

.wbs-container {
  max-width: 1440px;
  margin: 0px auto;
  padding: 0px 36px;
}

.wbs-top-nav {
  height: 64px;
  padding: 8px 16px;
  background: #fff;
  box-shadow: 0px 3px 10px #0002;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.nav-col {
flex: 1 auto;
}
.wbs-top-nav .main-logo {
max-width: 100%;
max-height: 46px;
}
.invisible {
visibility: hidden;
opacity: 0;
display: none;
}

.main-nav {
display: flex;
gap: 60px;
justify-content: end;
align-items: center;
}

.nav-item {
position: relative;
list-style: none;
}

.nav-link {
text-decoration: none;
color: var(--dark);
cursor: pointer;
display: inline;
}

.nav-link.btn-lime {padding: 12px;}

.nav-col.mobile-menu {
display: none;
}


.wbs-page-single,
.wbs-page-single.container {
	padding: 50px 20px;
}
.wbs-page-head {
  margin-top: 100px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--muted);
  padding-bottom: 26px;
}
.wbs-page p {
  margin-bottom: 1em;
}

.wbs-page ul {
  padding-left: 50px;
  margin-bottom: 1em;
}


/* HERO */
.hero { text-align: left; padding: 200px 0 100px; min-height: 100vh; display: flex;}
.hero h1 {font-size: 28px;}
.hero p { margin: 25px auto 45px; font-size: 1.1rem; max-width: 60vw; }
.hero div {flex: 1 auto;}
.hero div:first-of-type {width: 50%;}
.hero div:last-of-type {width: 50%;}
.hero img {margin-top: -80px;}

/* SECTION DARK - GENERAL */
.section-dark { 
	background: var(--dark); border-radius: 40px; padding: 80px 60px; 
	margin: 80px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 40px; color: var(--white);
	position: relative;
}
.section-dark p{
  transition: 0.4s ease;
  color: var(--muted);
  margin-top: 12px;
}		
.section-hd {flex: auto; width: 100%;}
.section-title {text-transform: uppercase; letter-spacing: 3px;}
.accent-text { color: var(--accent); }

/* FLOATING IMAGES (Desktop) */
.img-float-left { flex: 1; position: relative; border-radius: 30px; aspect-ratio: 1/1; overflow: hidden; }
.img-float-right { flex: 1; position: relative; border-radius: 30px; aspect-ratio: 1/1; overflow: hidden;}
.img-float-left img, .img-float-right img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s ease; }

.content-side { flex: 1.3; padding-bottom: 32px; }

/* ACCORDION */
.service-item { border-bottom: 1px solid #1e293b; padding: 25px 0; cursor: pointer; }
.service-header { display: flex; justify-content: space-between; align-items: center; }
.service-header h3 { font-weight: 500; font-size: 1.8rem; transition: 0.3s; }
.service-header .lnr { font-size: 1.6rem; color: var(--accent); }
.service-desc { max-height: 0; overflow: hidden;    transform: translateY(-8px);
    transition: 
        max-height 1s cubic-bezier(.25,.8,.25,1),
        opacity 0.4s ease,
        transform 0.4s ease; color: var(--muted); margin-top: 12px; }
.service-tags {font-size: 14px; line-height: 1.6; margin-top: 20px; background: #00000030; padding: 10px;}
.service-item.active .service-desc { max-height: 600px; transform: translateY(0);}
.service-item.active .service-header h3 { color: var(--accent); }

.service-item.active .lnr {
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

.lnr {
    transition: transform 0.3s ease;
}

.section-dark .btn-lime	{
  position: absolute;
  bottom: -53px;
  right: 90px;
  border: 20px solid var(--bg);
  border-radius: 32px;
}

/* PORTFOLIO GRID */
.portfolio { padding: 60px 0; text-align: center; }
.portfolio h3 { font-size: 28px; }
.portfolio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 60px 0; text-align: left; }
.project-card .thumb { background: #cbd5e1; height: 400px; border-radius: 25px; margin-bottom: 25px; overflow: hidden; }
.project-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: 0.7s; }
.project-card:hover img { transform: scale(1.08); }
.project-card .project-link { text-decoration: none; color: inherit; cursor: pointer;}
.wbs-section-project .portfolio img {
  box-shadow: 0px 10px 20px #0002;
}
#wbsSection.portfolio {padding-top: 0;}
.project-card .muted {
  margin: 0;
  font-size: 13px;
}

/* gallery */
.portfolio-gallery {
display: grid;
grid-template-columns: repeat(2fr, minmax(280px, 1fr));
gap: 20px;
padding-top: 100px;
}

.portfolio-gallery img {
max-width: 100%;
display: block;
cursor: pointer;
margin: 0 auto;
}

#lightbox-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.9);
display: none;
justify-content: center;
align-items: center;
z-index: 9999;
overflow: hidden;
}

#lightbox-overlay img {
max-width: 90%;
max-height: 90%;
cursor: zoom-in;
transition: transform 0.2s ease;
user-select: none;
}

#lightbox-overlay img.zoomed {
cursor: grab;
}

#lightbox-overlay img.zoomed:active {
cursor: grabbing;
}

.lightbox-close {
position: absolute;
top: 30px;
right: 40px;
font-size: 40px;
color: #fff;
cursor: pointer;
z-index: 10;
}

.lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: var(--dark);
color:var(--accent);
border: 1.5px solid var(--accent);
width: 55px;
height: 55px;
border-radius: 50%;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: 0.3s;
font-size: 21px;
user-select: none;
z-index: 10;
}

.lightbox-nav.prev { left: 20px; }
.lightbox-nav.next { right: 20px; }


.filter-menu {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  margin: 20px 0px;
  gap: 16px;
}

.filter-menu {
  list-style: none;
}

.filter-menu .btn-outline {
  border-bottom: 2px solid var(--dark);
  background: transparent;
  padding: 8px 16px;
  display: inline-block;
  text-decoration: none;
  font-size: 14px;
  color: var(--dark);
  cursor: pointer;
  transition: .5s;
}

.menu-ctg.active .btn {
  background: var(--accent);
  border-bottom: 2px solid var(--accent);
  border-radius: 12px;
}


/* ABOUT ME */
 #about .img-float-left {aspect-ratio: 4/3;}
 .wbs-section-project #about {
  margin-top: 128px;
}
/* TESTIMONIALS CAROUSEL */
.testimonial-section { padding: 100px 0; display: flex; align-items: center; gap: 80px; }
.avatar-circle { width: 300px; height: 300px; background: var(--accent); border-radius: 50%; position: relative; flex-shrink: 0; overflow: hidden; }
.avatar-circle img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); mix-blend-mode: multiply; transition: 0.5s; }


.testimonial-wrapper { flex: 1; overflow: hidden; }
.testimonial-wrapper-single {
  background: #fff;
  padding: 60px;
  border-radius: 30px;
  box-shadow: 0px 10px 20px #0001;
  font-size: 21px;
  position: relative;
}

.testimonial p {font-size: 21px;}

.carousel-track { display: flex; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.slide { min-width: 100%; }
.slide p { font-style: italic; margin-bottom: 25px; font-size: clamp(18px, 3.5vw, 20px); line-height: 1.4; color: var(--dark); }
.nav-btn { background: none; border: 1.5px solid var(--dark); width: 55px; height: 55px; border-radius: 50%; cursor: pointer; margin-right: 15px; display: inline-flex; align-items: center; justify-content: center; transition: 0.3s; }
.nav-btn:hover { background: var(--dark); color: var(--white); }



/* CONTACT SECTION */
.contact-box { background: var(--dark); border-radius: 50px; padding: 80px; color: var(--white); margin: 100px 0px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.form-group input, .form-group textarea { width: 100%; background: transparent; border: none; border-bottom: 1px solid #334155; padding: 25px 0; color: var(--white); margin-bottom: 30px; outline: none; font-family: var(--font-main); font-size: 1.1rem; }
.section-form label > span {
  font-size: 13px;
  color: var(--muted);
}
.contact-box .btn-lime {width: 100%; margin-top:21px;}


/*Carousel Clients*/
.logo-slider {
  height: 100px;
  margin: 32px auto;
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* Efectul de umbră pe margini pentru profunzime */
.logo-slider::before,
.logo-slider::after {
  background: linear-gradient(to right, var(--bg) 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 140px;
  position: absolute;
  width: 280px;
  z-index: 2;
}

.logo-slider::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}

.logo-slider::before {
  left: 0;
  top: 0;
}

/* Containerul care se mișcă */
.logo-slide-track {
  display: flex;
  width: calc(280px * 10); /* Ajustează în funcție de numărul de logo-uri */
  animation: scroll 40s linear infinite;
}

.logo-slide-track:hover {
  animation-play-state: paused; /* Se oprește la hover */
}

.logo-slide-track img {
  width: 280px;
  height: 120px;
  padding: 20px;
  object-fit: contain;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-250px * 7)); } /* Jumătate din lățimea totală */
}


/* FOOTER (Exact 3 Coloane) */
 footer { background: var(--dark); color: var(--white); padding: 20px 40px; border-top: 1px solid #1e293b; }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; }
.social-links { display: flex; justify-content: center; gap: 20px; }
.social-links a { color: var(--white); text-decoration: none; font-size: 0.9rem; display: flex; align-items: center; gap: 12px; transition: transform .5s; }
.social-links a:hover { color: var(--accent); transform: scale(1.1);}
.social-links img {max-width: 32px;}
.copyright { color: var(--muted); font-size: 0.95rem; }
.legal { text-align: right; }
.legal a { color: var(--muted); text-decoration: none; font-size: 0.95rem; transition: 0.3s; }
.legal a:hover { color: var(--white); }

/* RESPONSIVE REFINEMENT */
@media (max-width: 1150px) {
	.contact-box { padding: 40px; }
}

@media (max-width: 992px) {
.container {padding: 0px 10px;}
.section-dark { flex-direction: column; padding: 40px 20px; margin: 40px 0px;}
.img-float-left, .img-float-right { left: 0; right: 0; width: 100%; max-width: 450px; margin-bottom: 0; }
.portfolio-grid, .contact-grid, .footer-grid { grid-template-columns: 1fr; text-align: center; }
.social-links { margin: 10px 0; order:1;}
.legal, .copyright { text-align: center; }
.testimonial-section { flex-direction: column; text-align: center; gap: 40px; padding: 60px 0px 0px; }
.avatar-circle { margin: 0 auto; width: 250px; height: 250px; }
.contact-box {margin: 60px 0px; padding: 20px;}
.contact-grid { gap: 40px;}
.form-group input, .form-group textarea { padding: 12px 0px; margin-bottom: 15px;}
.section-dark .btn-lime {
  position: absolute;
  bottom: -65px;
  right: 0;
  border: 14px solid var(--bg);
  border-radius: 32px;
  text-align: center;
  left: 0;
}
footer {padding: 20px 0px;}
}

@media (max-width: 600px) {
#myBtn {bottom: 32px;}
.btn-lime {padding: 20px 25px;}	

.hero {flex-direction: column; padding-top: 150px; padding-bottom: 50px;}
.hero div {flex: 1; width: 100% !important; text-align: center;}
.hero p {max-width: 100vw; }
.hero h1 {font-size: clamp(21px, 5vw, 64px); margin-bottom: 12px;} 
.hero div:last-of-type {order: 1;}
.hero div:first-of-type {order: 2;}
.hero img {
  margin-top: -50px;
}

.wbs-header {
  width: 100vw;
  margin: 0;
}
 .nav-col.mobile-menu {
    display: block;
    text-align: right;
    font-size: 28px;
  }
  
  .nav-col.main-menu {
    width: 100%;
    padding: 16px;
    position: absolute;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    top: 0;
    left: 0;
    background: var(--dark);
    transition: all .5s;
  }
  .nav-col.main-menu.active {
    opacity: 1;
    visibility: visible;
    top: 70px;
  }  
  
  .nav-link {
	text-decoration: none;
	color: var(--white);
  }
  
  .nav-link.btn-lime{
	color: var(--dark);
	display: block;
  }
  
  
  .main-nav {

  flex-direction: column;
  gap: 20px;
  justify-content: end;
  align-items: center;
}
 

.logo-slider::before, .logo-slider::after {
	width: 110px;
} 

.testimonial-wrapper {
	display: flex;
  flex-direction: column;
  width: 100%;
}
  
.carousel-track {
  order: 2;
}

.carousel-btns {
  order: 1;
  margin-bottom: 21px;
}

.slide {
  padding: 0px 20px;
}

.testimonial-wrapper-single {
  padding: 24px;
  font-size: 18px;
  position: relative;
}

.testimonial-wrapper-single .testimonial p {
	font-size: inherit;
}
  
}


@media (max-width: 640px) {
  /* Preluăm elementele cu fade-left și le setăm ca fade-up pe mobil */
  [data-aos="fade-left"] {
    transform: translateY(50px) !important; /* mutare inițială în jos */
    opacity: 0; /* invizibil la load */
  }

  [data-aos="fade-left"].aos-animate {
    transform: translateY(0) !important; /* animat în poziția corectă */
    opacity: 1;
  }
}