* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
  overflow-x:hidden;
  background:#fafafa; 
  color:#1a1a1a;
  transition:background 0.3s, color 0.3s;
}

/* PREMIUM MODERN COLOR PALETTE */
:root {
  --green: #0f4c3a;        /* Deep forest green - premium */
  --light-green: #1a7a5a;  /* Lighter green for gradients */
  --gold: #d4af37;         /* Rich gold - luxury accent */
  --dark: #0a0a0a;         /* Pure black footer */
  --bg-light: #fafafa;     /* Clean white background */
  --text-dark: #1a1a1a;
  --text-light: #e5e7eb;
}

/* DARK MODE */
body.dark {
  background:#0a0a0a;
  color:var(--text-light);
}
body.dark .services { background:#141414; }
body.dark .service-card, body.dark .contact-form { background:#1a1a1a; color:var(--text-light); }
body.dark .section-title { color:var(--light-green); }
body.dark nav { background:rgba(10,10,10,0.95); }
body.dark .stat p { color:#9ca3af; }

/* LOADER */
.loader {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:var(--green); display:flex; flex-direction:column;
  justify-content:center; align-items:center; z-index:9999;
  transition:opacity 0.5s;
}
.loader-circle {
  width:60px; height:60px; border:4px solid rgba(212,175,55,0.3);
  border-top:4px solid var(--gold); border-radius:50%; animation:spin 1s linear infinite;
}
.loader p { color:var(--gold); margin-top:20px; font-weight:600; letter-spacing:1px; }
@keyframes spin { 100% { transform:rotate(360deg); } }

/* NAVIGATION */
nav{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    padding:15px 0;
    background:rgba(15,76,58,.95);
    backdrop-filter:blur(15px);
    box-shadow:0 8px 25px rgba(0,0,0,.15);
    z-index:1000;
    transition:all .3s ease;
}
.nav-container{
    width:90%;
    max-width:1200px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.logo{
    display:flex;
    align-items:center;
    gap:10px;
    color:#fff;
    font-size:22px;
    font-weight:800;
    letter-spacing:.5px;
    cursor:pointer;
    transition:.3s;
}

.logo:hover{
    transform:scale(1.03);
}
.logo-icon { animation:float 3s ease-in-out infinite; }
nav ul { list-style:none; display:flex; gap:35px; }
nav ul li a { color:white; text-decoration:none; font-weight:600; font-size:15px; position:relative; letter-spacing:0.3px; }
nav ul li a::after {
  content:''; position:absolute; bottom:-6px; left:0; width:0; height:2px;
  background:var(--gold); transition:0.3s;
}
nav ul li a:hover::after { width:100%; }
.nav-right { display:flex; gap:15px; align-items:center; }
.dark-toggle {
  background:rgba(212,175,55,0.2); border:2px solid var(--gold); color:var(--gold);
  width:42px; height:42px; border-radius:50%; cursor:pointer;
  font-size:18px; transition:0.3s; font-weight:700;
}
.dark-toggle:hover { background:var(--gold); color:var(--green); transform:rotate(180deg) scale(1.1); }
.menu-toggle { display:none; color:white; font-size:26px; cursor:pointer; }

/* WELCOME SECTION */
.welcome {
  padding:100px 20px;
  background:linear-gradient(180deg, #fafafa 0%, #f0f7f2 100%);
  text-align:center;
}
body.dark .welcome { background:linear-gradient(180deg, #0a0a0a 0%, #141414 100%); }

.welcome-box {
  max-width:800px;
  margin:0 auto;
  background:white;
  padding:60px 50px;
  border-radius:30px;
  box-shadow:0 20px 60px rgba(15,76,58,0.1);
  border:2px solid var(--gold);
}
body.dark .welcome-box { background:#1a1a1a; box-shadow:0 20px 60px rgba(212,175,55,0.1); }

.welcome-badge {
  display:inline-block;
  background:var(--gold);
  color:var(--green);
  padding:8px 20px;
  border-radius:50px;
  font-weight:800;
  font-size:14px;
  margin-bottom:20px;
  letter-spacing:1px;
}

.welcome-box h2 {
  font-size:42px;
  color:var(--green);
  margin-bottom:20px;
  font-weight:800;
}
body.dark .welcome-box h2 { color:var(--light-green); }

.welcome-box p {
  font-size:18px;
  line-height:1.8;
  color:#4b5563;
  margin-bottom:30px;
}
body.dark .welcome-box p { color:#d1d5db; }

.welcome-features {
  display:flex;
  justify-content:center;
  gap:30px;
  flex-wrap:wrap;
  margin-bottom:35px;
}
.feature {
  font-weight:600;
  color:var(--green);
  font-size:16px;
  display:flex;
  align-items:center;
  gap:8px;
}
.feature span { color:var(--gold); font-size:20px; }
body.dark .feature { color:var(--light-green); }

@media(max-width:768px) {
  .welcome-box { padding:40px 25px; }
  .welcome-box h2 { font-size:32px; }
  .welcome-features { flex-direction:column; gap:15px; }
  .hero-trust{
    gap:10px;
}

.trust-item{
    width:100%;
    justify-content:center;
}
}

/* HERO SECTION */
.hero {
  height:100vh; display:flex; align-items:center; justify-content:center;
  text-align:center; color:green; position:relative; overflow:hidden;
}
.hero-bg{
    position:absolute;
    inset:0;

    background-image:url("../Image/HERO.BG.png");
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

    filter:brightness(.35);
    animation:zoom 20s ease-in-out infinite alternate;
}
.hero-content{
    position:relative;
    z-index:2;
    width:90%;
    max-width:750px;
    margin:auto;
    text-align:center;
}
.hero h1{
    font-size:clamp(2.8rem,6vw,4.5rem);
    font-weight:800;
    line-height:1.15;
    color:#fff;
    text-shadow:0 4px 15px rgba(0,0,0,.45);
    margin-bottom:18px;
}
.typewriter {
  font-size:24px; min-height:35px; margin-bottom:15px; color:var(--gold);
  font-weight:600;
}
.typewriter::after {
  content:'|'; animation:blink 0.7s infinite;
  }
@keyframes blink { 50% { opacity:0; } }
.hero p{
    font-size:clamp(1rem,2vw,1.2rem);
    line-height:1.8;
    color:#f5f5f5;
    max-width:650px;
    margin:0 auto 20px;
}
.hero-btns { margin-top:35px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
.btn {
  padding:16px 38px; border-radius:50px; text-decoration:none; font-weight:700;
  transition:0.3s; display:inline-block; font-size:16px; letter-spacing:0.5px;
}
.btn-primary{
    background:linear-gradient(135deg,#d4af37,#f4d03f);
    color:var(--green);
    box-shadow:0 10px 30px rgba(212,175,55,.35);
}
.btn-outline{
    border:2px solid rgba(255,255,255,.8);
    color:#fff;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(8px);
}
.btn:hover{
    transform:translateY(-5px) scale(1.03);
    box-shadow:0 15px 35px rgba(0,0,0,.35);
}
.scroll-down {
  position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  animation:bounce 2s infinite; font-size:14px; color:var(--gold); font-weight:600;
}
.hero-container{
width:90%; max-width:1400px; margin:auto; display:grid; grid-template-columns:1fr 1fr; 
align-items:center; gap:50px; padding-top:120px;
}
.hero-left h1{ font-size:72px; line-height:1.1; color:#fff; margin:20px 0; }

.hero-left h1 span{ color:#32CD32; }

.hero-left p{ color:#eee; font-size:20px; line-height:1.8; margin-bottom:35px; max-width:650px; }

.hero-badge{ display:inline-block; padding:12px 24px; background:#ffffff; color:#2e7d32; border-radius:50px;
    font-weight:bold; }

.hero-buttons{ display:flex; gap:20px; margin-bottom:45px; }

.btn-primary{ background:#2e7d32; color:#fff; padding:18px 36px; border-radius:10px; font-weight:bold; transition:.4s;
}

.btn-primary:hover{ background:#1b5e20; transform:translateY(-5px); }
/* HERO TRUST BAR */

.hero-trust{
    margin-top:40px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
}

.trust-item{
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.2);
    padding:12px 18px;
    border-radius:50px;

    display:flex;
    align-items:center;
    gap:8px;

    color:#fff;
    font-size:15px;
    font-weight:600;

    transition:.3s;
}

.trust-item:hover{
    transform:translateY(-4px);
    background:rgba(255,255,255,.18);
}
.hero-card{
    margin:35px auto 0;
    max-width:320px;
    padding:18px 20px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.25);
    border-radius:18px;
    text-align:center;
    color:#fff;
    box-shadow:0 10px 25px rgba(0,0,0,.25);
}

.hero-card .stars{
    font-size:22px;
    margin-bottom:8px;
}

.hero-card h4{
    font-size:18px;
    margin-bottom:6px;
    color:#fff;
}

.hero-card p{
    margin:0;
    font-size:14px;
    opacity:.9;
}

/* NAVIGATION */  
nav {
  position:fixed; top:0; width:100%; background:rgba(15,76,58,0.98);
  backdrop-filter:blur(12px); z-index:1000; padding:18px 20px;
  animation:slideDown 0.6s ease; box-shadow:0 4px 20px rgba(0,0,0,0.1);
}

/* SECTIONS */
section { padding:110px 20px; }
.container { max-width:1200px; margin:auto; }
.section-title {
  text-align:center; font-size:44px; color:var(--green);
  margin-bottom:70px; position:relative; font-weight:800; letter-spacing:-0.5px;
}
.section-title::after {
  content:''; width:90px; height:4px; background:var(--gold);
  position:absolute; bottom:-18px; left:50%; transform:translateX(-50%); border-radius:2px;
}

/* ABOUT SECTION */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.about-img { position:relative; }
.about-img img { width:100%; border-radius:24px; box-shadow:0 25px 50px rgba(15,76,58,0.15); }
.badge {
  position:absolute; top:25px; right:25px; background:var(--gold);
  color:var(--green); padding:12px 24px; border-radius:50px; font-weight:800;
  box-shadow:0 6px 20px rgba(212,175,55,0.4);
}
.about-text h3 { font-size:32px; color:var(--green); margin-bottom:20px; font-weight:700; }
.about-text p { line-height:1.8; font-size:17px; margin-bottom:15px; }
.stats { display:flex; gap:40px; margin-top:35px; }
.stat h4 { font-size:36px; color:var(--green); font-weight:800; }
.stat p { color:#6b7280; font-weight:500; }

/* SERVICES SECTION */
.services { background:#f5f7f5; transition:background 0.3s; }
.services-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
    align-items:stretch;
}
.services-card{
    background:#fff;
    border-radius:20px;
    padding:35px 30px;
    transition:.35s;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    display:flex;
    flex-direction:column;
    height:100%;
  }
.services-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,.15);
}
.services-icon{
    width:70px;
    height:70px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    border-radius:50%;
    background:rgba(46,125,50,.1);
    margin-bottom:20px;
    animation:float 3s ease-in-out infinite;
}
.services-card h3 { color:var(--green); margin-bottom:15px; font-size:22px; font-weight:700; }
.services-card p { line-height:1.7; color:#4b5563; }

/* GALLERY SECTION */
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:25px; }
.gallery-item {
  height:270px; border-radius:20px; overflow:hidden; position:relative;
  cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,0.1);
}
.gallery-item img {
  width:100%; height:100%; object-fit:cover;
  transition:0.6s;
}
.gallery-item:hover img { transform:scale(1.15) rotate(1deg); }

/* CONTACT SECTION */
.contact { background:linear-gradient(135deg, var(--green), var(--light-green)); }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; }
.contact-info h3 { color:white; font-size:32px; margin-bottom:20px; font-weight:700; }
.contact-info p { color:rgba(255,255,255,0.9); margin-bottom:30px; font-size:17px; line-height:1.7; }
.contact-item { color:white; margin-bottom:18px; font-size:18px; display:flex; align-items:center; gap:12px; font-weight:500; }
.btn-whatsapp { background:#25D366; color:white; display:inline-block; margin-top:25px; font-weight:700; }
.contact-form { background:white; padding:45px; border-radius:24px; box-shadow:0 20px 60px rgba(0,0,0,0.2); transition:background 0.3s; }
.contact-form input,.contact-form select,.contact-form textarea {
  width:100%; padding:16px; margin-bottom:18px; border:2px solid #e5e7eb;
  border-radius:12px; font-size:16px; transition:0.3s; background:white; color:#1a1a1a; font-family:inherit;
}
body.dark .contact-form input, body.dark .contact-form select, body.dark .contact-form textarea {
  background:#1f2937; border-color:#374151; color:var(--text-light);
}
.contact-form input:focus,.contact-form textarea:focus {
  border-color:var(--gold); outline:none; box-shadow:0 0 0 3px rgba(212,175,55,0.1);
}
.contact-form button {
  width:100%; padding:18px; background:var(--green); color:white;
  border:none; border-radius:12px; font-weight:800; font-size:17px; cursor:pointer;
  transition:0.3s; letter-spacing:0.5px;
}
.contact-form button:hover { background:var(--light-green); transform:scale(1.02); box-shadow:0 8px 25px rgba(15,76,58,0.3); }

/* FOOTER */
footer { background:var(--dark); color:#9ca3af; text-align:center; padding:30px; font-weight:500; }

/* ANIMATIONS */
.fade-up { opacity:0; transform:translateY(30px); animation:fadeUp 0.8s forwards; }
.delay-1 { animation-delay:0.2s; }
.delay-2 { animation-delay:0.4s; }
.delay-3 { animation-delay:0.6s; }
.slide-left { opacity:0; transform:translateX(-50px); animation:slideLeft 0.8s forwards; }
.slide-right { opacity:0; transform:translateX(50px); animation:slideRight 0.8s forwards; }
.fade-left { opacity:0; transform:translateX(-30px); animation:fadeLeft 0.8s forwards; }
.fade-right { opacity:0; transform:translateX(30px); animation:fadeRight 0.8s forwards; }

@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }
@keyframes slideLeft { to { opacity:1; transform:translateX(0); } }
@keyframes slideRight { to { opacity:1; transform:translateX(0); } }
@keyframes fadeLeft { to { opacity:1; transform:translateX(0); } }
@keyframes fadeRight { to { opacity:1; transform:translateX(0); } }
@keyframes slideDown { from { transform:translateY(-100%); } to { transform:translateY(0); } }
@keyframes zoom { from { transform:scale(1); } to { transform:scale(1.1); } }
@keyframes bounce { 0%,100% { transform:translateX(-50%) translateY(0); } 50% { transform:translateX(-50%) translateY(10px); } }
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }

/* RESPONSIVE */
@media(max-width:768px) {
  nav ul { display:none; flex-direction:column; position:absolute; top:75px; right:20px; background:var(--green); padding:25px; border-radius:15px; gap:20px; box-shadow:0 10px 40px rgba(0,0,0,0.3); }
  body.dark nav ul { background:#141414; }
  nav ul.active { display:flex; }
  .menu-toggle { display:block; }
  .hero{
    min-height:100vh;
    padding:100px 20px 60px;
}

.hero-content{
    width:100%;
    max-width:100%;
    padding:0 10px;
}

.hero h1{
    font-size:38px;
    line-height:1.2;
    margin-bottom:15px;
}

.hero p{
    font-size:17px;
    line-height:1.7;
}

.hero-btns{
    flex-direction:column;
    align-items:center;
    gap:15px;
}

.hero-btns .btn{
    width:100%;
    max-width:280px;
    text-align:center;
}
  .about-grid,.contact-grid { grid-template-columns:1fr; gap:40px; }
  .stats { flex-direction:column; gap:20px; }
  section { padding:70px 20px; }
  .section-title { font-size:34px; }
  .contact-form { padding:30px 25px; }
}
#backToTop { position: fixed; bottom: 20px; right: 20px; background: #2e7d32; color: white; 
  border: none; padding: 10px 15px; border-radius: 50%; cursor: pointer; display: none;
}