@charset "utf-8";

/* CSS Document */

/* 320px - Telefoane mici (iPhone SE)
   360px - Android standard
   375px - iPhone Mini
   414px - iPhone Pro Max
   480px-600px - Telefoane mari / tablete mici
   <768px - Limită maximă mobile
   768px - Tablete (vertical)
   1024px - Desktop mic
   1280px+ - Desktop mare */








/* ========== RESET / BAZA ========== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Open Sans", sans-serif; }
/* oprește scroll-ul orizontal (asta îți rezolvă “meniul e în dreapta”) */
html, body { overflow-x: hidden; }


body.lg-on header{
  visibility: hidden;
}


/* ========== WRAPPER (opțional) ========== */
.wrapper {
	width: 100%; 
	overflow: visible;
}

/* ===== HEADER / NAV (mobile-first) ===== */
header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  background: #fff;

  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
body{
  padding-top: 70px; /* ajustezi dacă header-ul e mai înalt (ex: 76px) */
}
section{ scroll-margin-top: 90px; }


.logo img {
  width: 80px;
		height: 80px;
		object-fit: cover;
		animation: despreImage 4s linear infinite;
		}
		@keyframes despreImage{
  0%, 100%{
  transform: scale(1.1);
  border-radius:  4% 95% 6% 95% / 95% 4% 92% 5%;
  }
  50%{
  transform: scale(0.8); 

  border-radius: 95% 4% 97% 5% / 4% 94% 3% 95%;
  }
}

/* butoane */
.hamburger,
.close-btn{
  background: none;
  border: 0;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
	 
}

/* lista meniului */
.nav-menu{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ===== MENIU MOBIL (închis implicit) ===== */
nav{
  position: relative;
}

/* ascundem close pe mobil când e închis */
.close-btn{ display: none; }

/* meniul devine overlay */
.nav-menu{
  position: fixed;
  inset: 0;                 /* top/right/bottom/left = 0 */
  background: #111;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 18px;

  transform: translateX(100%);
	
	 opacity: 0;
  transition: transform .45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .35s ease;
}

.nav-menu a{
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  font-family: "Roboto", sans-serif;
	 transition: color .3s ease;
}

.nav-menu a:hover,
.nav-menu a:focus{
  color: #6a5cff;
}

.nav-menu a.active{
  color: #2c6bed;
  font-weight: 600;
}


/* când e deschis */
nav.is-open .nav-menu{
  transform: translateX(0);
	 opacity: 1;
}

nav.is-open .close-btn{
  display: block;
  position: fixed;
  top: 18px;
  right: 18px;
  color: #fff;
  z-index: 1100;
}

nav.is-open .hamburger{
  display: none;
}
.hero{
  background: linear-gradient(135deg, #2a6df4, #00b4d8);
  color: #fff;
  padding: 4rem 1rem 3.5rem;
  text-align: center;
}

.hero-inner{
  max-width: 680px;
  margin: 0 auto;
}

.hero h1{
  font-family: 'Festive';
  font-style: normal;
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.25;
  margin-bottom: 1rem;
}

.hero p{
  font-size: 1.05rem;
  opacity: 0.95;
  margin-bottom: 2rem;
}
.hero .btn{
  background: #fff;
  color: #2a6df4;
  padding: 0.9rem 1.8rem;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  transition: transform .2s ease, box-shadow .2s ease;
}

.hero .btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.18);
}





/*---Inceput-stil-sectiune-despre---*/
.despre{
  padding: 3.5rem 1rem;
  background: #fff;
}

.despre-inner{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: 1.8rem;
}

.despre-text h2{
  font-family: 'Festive';
  font-style: normal;
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.2;
  color: #111;
  margin-bottom: 0.8rem;
}

.despre-text p{
  font-size: 1.05rem;
  color: #444;
  max-width: 60ch;
}

/* imagine */
.despre-img img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.10);
}

/*---Sfarsit-stil-sectiune-despre---*/






/*---Inceput-stil-sectiune-servicii---*/
.servicii{
  padding: 3.5rem 1rem;
  background: #f7f8fb;
  text-align: center;
}

.servicii h2{
  font-family: 'Festive';
  font-style: normal;
  font-weight: 400;
  font-size: 1.9rem;
  color: #111;
  margin-bottom: 2rem;
}

/* grid */
.servicii-container{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: 1.2rem;
}

/* card */
.serviciu{
	 position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: 18px;
  padding: 1.6rem 1.4rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.06);
  text-align: left;
  transition: transform .2s ease, box-shadow .2s ease;
}
.serviciu::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, #2a6df4, #00b4d8);
  opacity: 0.9;
}
.serviciu:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.10);
}

/* icon */
.serviciu i{
  font-size: 1.9rem;
  color: #2a6df4;
  margin-bottom: 0.9rem;
}

/* titlu + text */
.serviciu h3{
  font-family: 'Festive';
  font-style: normal;
  font-weight: 400;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: #111;
}

.serviciu p{
  color: #444;
  font-size: 1rem;
  line-height: 1.6;
}

/*---Sfarsit-stil-sectiune-servicii---*/






/*---Inceput-stil-sectiune-portofoliu---*/
.portofoliu{
  padding: 3.5rem 1rem;
  background: #fff;
  text-align: center;
}

.portofoliu h2{
  font-family: 'Festive';
  font-size: 1.9rem;
  margin-bottom: 1.5rem;
  color: #111;
}

.portofoliu-grid{
  display: grid;
	 grid-template-columns: 1fr;
  gap: 1rem;
}
.portofoliu-item{
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  transition: opacity .25s ease, transform .25s ease;
}

.portofoliu-item img{
  width: 100%;
  height: auto;
  display: block;
  transition: transform .35s ease;
}

.portofoliu-item:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.12);
}

.portofoliu-item:hover img{
  transform: scale(1.08);
}

.portofoliu-caption{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  color: #fff;
	
  display: flex;
  align-items: center;
  justify-content: center;
	
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  padding: 1rem;

  opacity: 0;
  transition: opacity .25s ease;
}

.portofoliu-item:hover .portofoliu-caption{
  opacity: 1;
}

.portofoliu-caption{
  backdrop-filter: blur(2px);
}

.portofoliu-filter{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;

  max-width: 1100px;
  margin: 0 auto 18px;
}


.filter-btn{
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.filter-btn:hover{
  color: #6a5cff;
  border-color: rgba(106,92,255,.35);
}

.filter-btn:focus{
  outline: none;
}


.filter-btn.is-active{
  background: #2c6bed;
  color: #fff;
  border-color: #2c6bed;
}

/* ascundere item */
.portofoliu-item.is-hidden{
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
}







.lg-toolbar, .lg-close{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  display: block !important;
  z-index: 99999 !important;
}
/* LightGallery peste header-ul fix */
.lg-backdrop,
.lg-outer{
  z-index: 99999 !important;
}

.lg-toolbar{
  z-index: 100000 !important;
}

/*---Sfarsit-stil-sectiune-portofoliu---*/











/*---Inceput-stil-sectiune-contact---*/
/* ===== CONTACT ===== */
.contact{
  padding: 3.5rem 1rem;
  background: #f7f8fb;
}

.contact h2{
  font-family: 'Festive';
  font-weight: 400;
  font-size: 1.9rem;
  text-align: center;
  margin: 0 0 1.5rem;
  color: #111;
}

.contact-wrap{
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  gap: 1.6rem;
}

.contact-form{
  background: #fff;
  border-radius: 16px;
  padding: 1.2rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
}

.contact-form label{
  display: block;
  margin-bottom: 0.9rem;
}

.contact-form span{
  display: block;
  font-size: .9rem;
  color: #444;
  margin-bottom: 6px;
}

.contact-form input,
.contact-form textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.14);
  font-family: inherit;
  font-size: 1rem;
  background: #fff;
}

.contact-form textarea{ resize: vertical; min-height: 130px; }

.contact-form input:focus,
.contact-form textarea:focus{
  outline: none;
  border-color: #2c6bed;
  box-shadow: 0 0 0 3px rgba(44,107,237,.15);
}

.contact-form .btn{
  width: 100%;
  margin-top: .2rem;
}

.contact-info{
  background: #fff;
  border-radius: 16px;
  padding: 1.2rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
}

.contact-info p{
  margin: 0 0 10px;
  color: #111;
}

.contact-info i{
  margin-right: 10px;
  color: #2c6bed;
}

.form-msg{
  margin-top: 10px;
  font-size: .95rem;
  color: #111;
}

.form-msg.ok{ color: #1a7f37; }
.form-msg.err{ color: #b42318; }

/*---Sfarsit-stil-sectiune-contact---*/
















/* ========== FOOTER ========== */
.footer {
	 max-width: 1200px;
  color: #111;
  margin: 0 auto;
  border-top: 1px dotted #111;
	 text-align: center;
}
.footer .wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px; /* spațiu lateral */
}
.footer .box-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
  gap: 20px;
}
.footer .box-container .box h3 {
  margin-bottom: 10px;
  font-size: 1.5rem;
  font-family: 'Festive';
  font-style: normal;
  font-weight: 400;
  color: #111;
}
.footer .box-container .box a {
  display: block;
  color: #111;
  text-decoration: none;
  margin: 5px 0;
  transition: color 0.3s ease;
}
.footer .box-container .box a i {
  padding-right: 8px;
}
.footer .box-container .box a:hover{
	color: #000;
}
.footer .box-container .box a:hover i {
  padding-right: 32px;
}
.footer .credit p {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: #111;
  font-family: Arial, sans-serif;
  text-align: center;
}






/* Buton "Înapoi sus" */
#toBtn {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
  color: #111;
  font-size: 22px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(255, 255, 255, .7);
  backdrop-filter: blur(4px);
  z-index: 1000;
  transition: all 0.3s ease;
	
	 opacity: 0;
  transform: translateY(10px);
}

/* Starea activă (când e vizibil) */
#toBtn.show {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

/* Efect la hover */
#toBtn:hover {
  background: rgba(0, 0, 0, .3);
  transform: translateY(-3px);
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}






















@media (min-width: 600px){
  .servicii-container{
    grid-template-columns: repeat(2, 1fr);
    gap: 1.4rem;
  }
	
}

















/* ========== DESKTOP ========== */
@media (min-width: 768px){
/* ascundem butoanele pe desktop */
  .hamburger,
  .close-btn{
    display: none !important;
  }

   /* resetăm meniul din overlay (mobil) în meniu normal (desktop) */
  .nav-menu{
    position: static;
    inset: auto;
    background: transparent;
    transform: none;
    transition: none;
    opacity: 1;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
  }

 .nav-menu a{
    color: #111;
    font-size: 16px;
    position: relative;
    display: inline-block;
    text-decoration: none;
  }
	
	.nav-menu a:hover{
    color: #6a5cff;   /* culoare hover */
  }

  .nav-menu a.active{
    color: #2c6bed;   /* culoare link activ */
  }

  
	
	
	
	
	
  /* HERO */
  .hero{ padding: 5.5rem 2rem 5rem; }
  .hero h1{ font-size: 2.5rem; }
  .hero p{ font-size: 1.15rem; }

  /* DESPRE */
  .despre{ padding: 5rem 2rem; }
  .despre-inner{
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 2.5rem;
  }
  .despre-text h2{ font-size: 2.1rem; }
  .despre-text p{ font-size: 1.1rem; }

  /* SERVICII */
  .servicii-container{
    grid-template-columns: repeat(2, 1fr);
    gap: 1.4rem;
  }
	
	
	
	/*---portofoliu---*/
	.portofoliu-grid{
    grid-template-columns: repeat(2, 1fr);
  }
	
	
	
	
	.contact-wrap{
    grid-template-columns: 1.2fr .8fr;
    align-items: start;
    gap: 2rem;
  }

  .contact-form{ padding: 1.6rem; }
  .contact-info{ padding: 1.6rem; }
	
	
	
	.footer .box-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
}
	
	
	
}








@media (hover: hover){
  .portofoliu-item:hover img{ transform: scale(1.06); }
  .portofoliu-item:hover .portofoliu-caption{ opacity: 1; }
}









/* underline animat la hover (desktop) */
@media (min-width: 768px) and (hover: hover){
  .nav-menu a::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
    opacity: .7;
    pointer-events: none;
  }

  .nav-menu a:hover::after,
  .nav-menu a.active::after{
    transform: scaleX(1);
  }
}



















@media (min-width: 1024px){
  .hero-inner{
    max-width: 820px;
  }

  .hero h1{
    font-size: 3rem;
  }
	.despre-inner{
    gap: 3.2rem;
  }
	.despre-text h2{
  position: relative;
}

.despre-text h2::after{
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin-top: 0.7rem;
  border-radius: 999px;
  background: #2a6df4;
  opacity: 0.9;
}
	.servicii{
    padding: 5rem 2rem;
  }
	.servicii-container{
    grid-template-columns: repeat(4, 1fr);
  }
	
	
	
	
	/*---portofoliu---*/
	.portofoliu-grid{
    grid-template-columns: repeat(2, 1fr);
  }
	
	

	
	
	.footer .box-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
}
	
	
	
	

	
}
















@media (min-width: 1280px){
  .portofoliu-grid{
    grid-template-columns: repeat(4, 1fr);
  }
}