body{
  margin:0;
  font-family:Segoe UI,Arial;
  background:#f3f6f3;
  color:#1f3d2b;
}

/* HERO */
.hero{
  padding:120px 20px 80px;
  text-align:center;
  background:linear-gradient(135deg,#2f5d3a,#1f3d2b);
  color:#fff;
}

/* SECTIONS */
.section{
  padding:70px 20px;
  text-align:center;
}
.light{background:#fff}

/* ===== DESKTOP TOP MENU ===== */
.top-menu{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:2000;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(12px);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 30px;
}

.logo{
  font-weight:800;
  font-size:20px;
}

.top-menu nav{
  display:flex;
  align-items:center;
}

.about-container{
  max-width:1000px;
  margin:0 auto;
}

.about-title{
  font-size:32px;
  margin-bottom:20px;
  color:#1f3d2b;
}

.about-title span{
  display:block;
  font-size:18px;
  font-weight:500;
  opacity:.8;
}

.about-intro{
  font-size:16px;
  line-height:1.7;
  margin-bottom:40px;
}

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

.about-card{
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(12px);
  border-radius:18px;
  padding:22px;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
  transition:.3s;
}

.about-card:hover{
  transform:translateY(-6px);
}

.about-card h3{
  margin-bottom:10px;
  font-size:18px;
  color:#2f5d3a;
}

.energy-box{
  margin-top:40px;
  background:linear-gradient(135deg,#2f5d3a,#1f3d2b);
  color:#fff;
  padding:30px;
  border-radius:20px;
  box-shadow:0 15px 35px rgba(0,0,0,.2);
}

.energy-box h3{
  margin-bottom:10px;
}

.about-footer{
  margin-top:30px;
  font-weight:600;
}


.vm-box{
  margin-top:30px;
  padding:30px;
  border-radius:22px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(14px);
  box-shadow:0 14px 35px rgba(0,0,0,.14);
}

.vm-box h3{
  margin-bottom:14px;
  font-size:22px;
  color:#2f5d3a;
}

.vm-box p{
  line-height:1.7;
  margin-bottom:12px;
}

.mission-list{
  list-style:none;
  padding:0;
  margin:0;
}

.mission-list li{
  margin-bottom:14px;
  padding-left:34px;
  position:relative;
  line-height:1.6;
}

.mission-list li::before{
  content:"✔";
  position:absolute;
  left:0;
  top:2px;
  color:#2f5d3a;
  font-weight:700;
}

@media(max-width:768px){
  .vm-box{
    padding:22px;
  }
}




.top-menu nav a{
  text-decoration:none;
  color:#1f3d2b;
  font-weight:600;
  margin-left:22px;
}

/* LANGUAGE FLAGS */
.desktop-lang{
  display:flex;
  gap:8px;
  margin-left:28px;
}

.desktop-lang button{
  font-size:22px;
  border:none;
  background:transparent;
  cursor:pointer;
  transition:.2s;
}

.desktop-lang button:hover{
  transform:scale(1.15);
}

/* ===== MOBILE BOTTOM NAV ===== */
.bottom-nav{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  z-index:1000;
  display:flex;
  justify-content:space-around;
  padding:10px 0;
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(12px);
  box-shadow:0 -6px 20px rgba(0,0,0,.15);
}

.bottom-nav a{
  text-decoration:none;
  color:#1f3d2b;
  font-size:12px;
  text-align:center;
}

.bottom-nav span{
  display:block;
  font-size:11px;
}

/* ===== RESPONSIVE ===== */
@media(max-width:899px){
  .top-menu{display:none;}
}

@media(min-width:900px){
  .bottom-nav{display:none;}
}

/* Desktop */
@media(min-width:900px){
.bottom-nav{top:0;bottom:auto}
}
.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
}

.topnav #myLinks {
  display: none;
}

.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}
.mobile-container {
  max-width: 480px;
  margin: auto;
  background-color: #555;
  height: 500px;
  color: white;
  border-radius: 10px;
}

.slideshow img{width:100%;max-width:100%;border-radius:12px;display:none;margin:100 auto}
.slideshow img.active{display:block}
.contact-form{max-width:320px;margin:20px auto;display:flex;flex-direction:column}
.contact-form input,.contact-form textarea{margin:6px 0;padding:8px}
.contact-form button{padding:10px;background:#2f5d3a;color:#fff;border:none}
.map{width:100%;height:200px;border:0;margin-top:15px}
.whatsapp{
position:fixed;right:15px;bottom:80px;
background:#25d366;color:#fff;
width:52px;height:52px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:24px;text-decoration:none}

.top-menu{
display:none;position:fixed;top:0;left:0;right:0;
background:rgba(255,255,255,.85);
backdrop-filter:blur(10px);
padding:12px 30px;
z-index:2000;
display:none;justify-content:space-between;align-items:center}
.top-menu nav a{margin-left:20px;text-decoration:none;color:#1f3d2b;font-weight:600}
.tty nav a{margin-right:90px;text-decoration:none;color:#1f3d2b;font-weight:800}

@media(min-width:900px){
.top-menu{display:flex}
.hero{padding-top:80px}
.bottom-nav{display:none}
}

.products{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:20px;
max-width:900px;
margin:0 auto}
.product-card{
background:#fff;
border-radius:16px;
padding:20px;
box-shadow:0 10px 25px rgba(0,0,0,.12)}
.product-card h3{margin:0 0 10px}
.price{
font-size:18px;
font-weight:700;
color:#2f5d3a}

.order{
display:block;margin-top:12px;
padding:10px;
background:#25d366;
color:#fff;text-decoration:none;
border-radius:8px;font-weight:600}
.badge{
position:absolute;top:12px;right:12px;
background:#e63946;color:#fff;
padding:4px 8px;border-radius:6px;font-size:12px}
.product-card{position:relative}


.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  padding: 20px;
}

.gallery img {
  width: 100%;
  cursor: pointer;
  border-radius: 8px;
  transition: 0.3s;
}

.gallery img:hover {
  transform: scale(1.05);
}

/* Lightbox */
#lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  justify-content: center;
  align-items: center;
  z-index: 999;
}

#lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
}

#lightbox .close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 35px;
  color: #fff;
  cursor: pointer;
}
.mobile-lang{
  position:fixed;
  top:12px;
  right:12px;
  z-index:3000;
  display:flex;
  gap:6px;
}
@media(max-width:899px){
  .desktop-lang{display:none;}
}

@media(min-width:900px){
  .mobile-lang{display:none;}
}
.desktop-lang{
  display:flex;
  gap:8px;
  margin-left:28px;
}
.mobile-lang{
  position:fixed;
  top:12px;
  right:12px;
  z-index:3000;
  display:flex;
  gap:6px;
}
.lang button{
  font-size:22px;
  border:none;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);
  border-radius:8px;
  cursor:pointer;
  padding:4px 6px;
  transition:.2s;
}
.lang button:hover{
  transform:scale(1.15);
}
/* Gallery */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:12px;
}
.gallery img{
  width:100%;
  border-radius:10px;
  cursor:pointer;
  transition:.3s;
}
.gallery img:hover{
  transform:scale(1.05);
}

/* Lightbox */
#lightbox{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.9);
  z-index:9999;
  justify-content:center;
  align-items:center;
}

#lightbox img{
  max-width:90%;
  max-height:85%;
  border-radius:12px;
}

/* Controls */
#lightbox .close{
  position:absolute;
  top:20px;
  right:30px;
  font-size:34px;
  color:#fff;
  cursor:pointer;
}

#lightbox .nav{
  position:absolute;
  top:50%;
  font-size:50px;
  color:#fff;
  cursor:pointer;
  user-select:none;
}

#lightbox .left{left:30px}
#lightbox .right{right:30px}