
:root {
  --primary-color: #2563eb;
  --secondary-color: #1e40af;
  --accent-color: #3b82f6;
  --text-color: #1f2937;
  --light-color: #f9fafb;
  --dark-color: #111827;
  --success-color: #10b981;
  --error-color: #ef4444;
  --transition: all 0.3s ease;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif}
body{color:var(--text-color);background-color:var(--light-color);line-height:1.6;overflow-x:hidden}
.section{padding:6rem 5%;max-width:1400px;margin:0 auto}
.section-title{font-size:clamp(2rem,5vw,2.5rem);font-weight:700;margin-bottom:3rem;text-align:center;position:relative;color:var(--dark-color)}
.section-title::after{content:'';position:absolute;bottom:-1rem;left:50%;transform:translateX(-50%);width:80px;height:4px;background-color:var(--primary-color);border-radius:2px}
.btn{display:inline-block;padding:.8rem 1.8rem;background-color:var(--primary-color);color:#fff;border-radius:.5rem;text-decoration:none;font-weight:500;transition:var(--transition);border:none;cursor:pointer;font-size:1rem}
.btn:hover{background-color:var(--secondary-color);transform:translateY(-3px);box-shadow:0 10px 15px -3px rgba(0,0,0,.1)}
.btn-outline{background-color:transparent;border:1px solid var(--primary-color);color:var(--primary-color)}
.btn-outline:hover{background-color:var(--primary-color);color:#fff}
.navbar{background-color:#fff;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);position:fixed;width:100%;top:0;z-index:1000;transition:var(--transition)}
.navbar-container{display:flex;justify-content:space-between;align-items:center;padding:1rem 5%;max-width:1400px;margin:0 auto}
.logo{font-size:1.5rem;font-weight:700;color:var(--primary-color);text-decoration:none;display:flex;align-items:center;gap:.5rem}
.logo-icon{height:35px;width:35px;border-radius:8px}
.nav-links{display:flex;gap:2.0rem;list-style:none;align-items:center}
.nav-link{text-decoration:none;color:var(--text-color);font-weight:500;transition:var(--transition);padding:.5rem 0;position:relative}
.nav-link:hover{color:var(--primary-color)}
.nav-link.active{color:var(--primary-color)}
.nav-link::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background-color:var(--primary-color);transition:var(--transition)}
.nav-link:hover::after{width:100%}
.mobile-menu-btn{display:none;background:none;border:none;cursor:pointer;font-size:1.5rem;color:var(--text-color)}
.hero{min-height:100vh;display:flex;align-items:center;padding:0 5%;margin-top:80px;position:relative;background:linear-gradient(135deg,rgba(37,99,235,.05) 0%,rgba(244,246,249,.05) 100%);z-index:1}
.hero-content{max-width:600px;animation:fadeInUp 1s ease;z-index:2}
.hero-title{font-size:clamp(2.5rem,6vw,3.5rem);font-weight:800;margin-bottom:1.5rem;line-height:1.2;color:var(--dark-color)}
.hero-title span{color:var(--primary-color)}
.hero-description{font-size:clamp(1rem,2vw,1.1rem);margin-bottom:2rem;color:var(--text-color);opacity:.9}
.hero-buttons{display:flex;gap:1rem;flex-wrap:wrap}
.hero-image{position:absolute;right:5%;width:50%;max-width:600px;animation:fadeIn 1s ease .3s forwards;opacity:0;z-index:0}
.hero-image img{width:100%;height:auto;border-radius:1rem;box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04)}
.about-content{display:flex;gap:4rem;align-items:center}
.about-image{flex:1;border-radius:1rem;overflow:hidden;box-shadow:0 20px 25px -5px rgba(0,0,0,.1)}
.about-image img{width:100%;height:auto;display:block}
.about-text{flex:1}
.about-text h3{font-size:clamp(1.5rem,4vw,2rem);margin-bottom:1.5rem;color:var(--dark-color)}
.about-text p{margin-bottom:1.5rem}
.services-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin-top:3rem}
.service-card{background-color:#fff;border-radius:.8rem;padding:2.0rem;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);transition:var(--transition);text-align:center}
.service-card:hover{transform:translateY(-10px);box-shadow:0 20px 25px -5px rgba(0,0,0,.1)}
.service-icon{font-size:2.4rem;color:var(--primary-color);margin-bottom:1.0rem}
.service-title{font-size:1.35rem;font-weight:600;margin-bottom:.7rem;color:var(--dark-color)}
.service-description{color:var(--text-color);opacity:.9}
.contact-form{background-color:#fff;border-radius:1rem;padding:2.5rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);max-width:600px;margin:0 auto}
.form-group{margin-bottom:1.2rem}
.form-label{display:block;margin-bottom:.5rem;font-weight:500;color:var(--dark-color)}
.form-control{width:100%;padding:.8rem 1rem;border:1px solid #e5e7eb;border-radius:.5rem;font-size:1rem;transition:var(--transition)}
.form-control:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(37,99,235,.2)}
textarea.form-control{min-height:150px;resize:vertical}
.form-submit{width:100%;padding:1rem}
.contact-details{text-align:center;margin-top:2rem;font-size:1.05rem;color:var(--text-color)}
.contact-details p{margin-bottom:.4rem}
.contact-details a{color:var(--primary-color);text-decoration:none;font-weight:600}
.contact-details a:hover{text-decoration:underline}
.footer{background-color:var(--dark-color);color:#fff;padding:3.2rem 5%;text-align:center}
.footer-logo{font-size:1.6rem;font-weight:700;color:#fff;margin-bottom:1.2rem;display:inline-block}
.footer-links{display:flex;justify-content:center;gap:1.6rem;list-style:none;margin-bottom:1.6rem;flex-wrap:wrap}
.footer-link{color:#d1d5db;text-decoration:none;transition:var(--transition)}
.footer-link:hover{color:#fff}
.copyright{color:#9ca3af}
.form-message{padding:1rem;border-radius:.5rem;margin-bottom:1rem;text-align:center}
.form-message.success{background-color:rgba(16,185,129,.1);color:var(--success-color)}
.form-message.error{background-color:rgba(239,68,68,.1);color:var(--error-color)}
/* Gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:2rem}
.gallery-item{background:#fff;border-radius:.8rem;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.06);transition:transform .2s ease}
.gallery-item img{width:100%;display:block;cursor:pointer}
.gallery-item:hover{transform:translateY(-4px)}
.gallery-item figcaption{text-align:center;padding:.6rem .8rem;color:#4b5563;font-size:.95rem}
/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;padding:2rem;z-index:2000}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:.6rem;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.lightbox-close{position:absolute;top:16px;right:20px;font-size:2.2rem;background:none;border:none;color:#fff;cursor:pointer;line-height:1}
.hidden{display:none!important}
/* WhatsApp button */
.whatsapp-float{position:fixed;right:18px;bottom:18px;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,0,0,.2);z-index:1500}
.whatsapp-float:hover{transform:translateY(-2px)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:992px){
  .hero{flex-direction:column;text-align:center;min-height:auto;padding-top:100px;padding-bottom:3rem}
  .hero-content{max-width:100%}
  .hero-image{position:relative;right:auto;width:100%;max-width:100%;margin-top:2rem;opacity:1;animation:none}
  .about-content{flex-direction:column;gap:2rem}
  .about-text{text-align:center}
  .about-text .btn{margin-top:1rem}
}
@media (max-width:768px){
  .section{padding:4rem 5%}
  .hero-title{font-size:2.4rem}
  .section-title{font-size:2rem}
  .mobile-menu-btn{display:block}
  .nav-links{position:fixed;top:75px;left:0;width:100%;background-color:#fff;flex-direction:column;gap:0;padding:1rem 0;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);transform:translateX(-100%);transition:var(--transition)}
  .nav-links.active{transform:translateX(0)}
  .nav-link{width:100%;text-align:center;padding:1rem 0}
  .nav-link::after{display:none}
  .mobile-menu-btn .fa-bars{display:block}
  .mobile-menu-btn .fa-times{display:none}
  .mobile-menu-btn.active .fa-bars{display:none}
  .mobile-menu-btn.active .fa-times{display:block}
}
