/* -------------------------------------------------
   Global & Variables
   ------------------------------------------------- */
* { margin:0; padding:0; box-sizing:border-box; font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif; }
:root{
  --primary:#04675b; --secondary:#09758a; --accent:#f72585;
  --light:#f8f9fa; --dark:#212529; --success:#1ee5ff;
}
body{
  background:linear-gradient(135deg,#f5f7fa 0%,#c3cfe2 100%);
  color:var(--dark); line-height:1.6; min-height:100vh; padding-bottom:2rem;
}
.container{ width:90%; max-width:1200px; margin:0 auto; padding:0 15px; }

/* -------------------------------------------------
   Header & Nav
   ------------------------------------------------- */
header{
  background:rgba(255,255,255,.9); box-shadow:0 2px 15px rgba(0,0,0,.1);
  position:sticky; top:0; z-index:100; backdrop-filter:blur(10px);
}
.header-content{ display:flex; justify-content:space-between; align-items:center; padding:1rem 0; }
.logo{ display:flex; align-items:center; gap:10px; }
.logo i{ font-size:2rem; color:var(--primary); }
.logo h1{ font-size:1.8rem; font-weight:700; color:var(--primary); }
nav ul{ display:flex; list-style:none; gap:1.5rem; }
nav a{
  text-decoration:none; color:var(--dark); font-weight:600;
  padding:.5rem .8rem; border-radius:4px; transition:all .3s ease;
}
nav a:hover, nav a.active{ background:var(--primary); color:#fff; }
.mobile-menu-btn{ display:none; font-size:1.5rem; background:none; border:none; color:var(--primary); cursor:pointer; }

/* -------------------------------------------------
   Hero
   ------------------------------------------------- */
.hero{
  background:linear-gradient(to right,rgba(67,97,238,.8),rgba(58,12,163,.8)),
              url("https://images.unsplash.com/photo-1516387938699-a93567ec168e?ixlib=rb-4.0.3&auto=format&fit=crop&w=1500&q=80");
  background-size:cover; background-position:center; color:#fff;
  padding:5rem 0; text-align:center; border-radius:0 0 20px 20px; margin-bottom:3rem;
}
.hero h2{ font-size:2.8rem; margin-bottom:1rem; }
.hero p{ font-size:1.2rem; max-width:700px; margin:0 auto 2rem; }
.btn{
  display:inline-block; background:var(--accent); color:#fff;
  padding:.8rem 1.8rem; border-radius:50px; text-decoration:none;
  font-weight:600; transition:all .3s ease; border:none; cursor:pointer;
}
.btn:hover{ background:#ff4da6; transform:translateY(-3px); box-shadow:0 10px 20px rgba(0,0,0,.1); }

/* -------------------------------------------------
   Sections
   ------------------------------------------------- */
section{ display:none; padding:3rem 0; }
section.active{ display:block; animation:fadeIn .5s ease; }
@keyframes fadeIn{ from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }
.section-title{ text-align:center; margin-bottom:3rem; color:var(--primary); }
.section-title h2{ font-size:2.2rem; margin-bottom:.5rem; }
.section-title p{ color:#666; max-width:700px; margin:0 auto; }

/* -------------------------------------------------
   Features
   ------------------------------------------------- */
.features{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem; margin-bottom:3rem; }
.feature-card{
  background:#fff; border-radius:10px; padding:2rem; text-align:center;
  box-shadow:0 5px 15px rgba(0,0,0,.05); transition:transform .3s ease;
}
.feature-card:hover{ transform:translateY(-5px); }
.feature-card i{ font-size:2.5rem; color:var(--primary); margin-bottom:1rem; }
.feature-card h3{ margin-bottom:1rem; color:var(--secondary); }

/* -------------------------------------------------
   Form & ID Card
   ------------------------------------------------- */
.form-section{ background:#fff; border-radius:10px; padding:2rem; box-shadow:0 5px 15px rgba(0,0,0,.05); }
.form-container{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:2rem; }
.form-column{ display:flex; flex-direction:column; gap:1.5rem; }
.preview-column{ display:flex; flex-direction:column; gap:1.5rem; }

.form-group{ display:flex; flex-direction:column; gap:.5rem; }
.form-group label{ font-weight:600; color:var(--secondary); }
.form-group input,
.form-group select,
.form-group textarea{
  padding:.8rem 1rem; border:1px solid #ddd; border-radius:4px;
  font-size:1rem; transition:border-color .3s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{ border-color:var(--primary); outline:none; }

/* Photo upload */
.photo-upload{ display:flex; flex-direction:column; align-items:center; gap:1rem; }
.photo-preview{
  width:150px; height:150px; border:2px dashed #ddd; border-radius:8px;
  display:flex; justify-content:center; align-items:center; overflow:hidden;
}
.photo-preview img{ width:100%; height:100%; object-fit:cover; display:none; }
.upload-btn{
  background:var(--primary); color:#fff; padding:.6rem 1.2rem;
  border-radius:4px; cursor:pointer; transition:background .3s ease;
  text-align:center; font-weight:600;
}
.upload-btn:hover{ background:var(--secondary); }
#fileInput{ display:none; }

/* ID Card */
.id-card{
  background:linear-gradient(135deg,#fff 0%,#f3f4f6 100%);
  border-radius:12px; overflow:hidden; box-shadow:0 10px 25px rgba(0,0,0,.1);
  border:1px solid #e5e7eb; max-width:500px; margin:0 auto; padding:20px;
  display:grid; grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto auto auto; gap:15px;
}
.id-card-header{ grid-column:span 2; text-align:center; padding-bottom:15px; border-bottom:2px solid var(--primary); }
.id-card-header h2{ font-size:1.4rem; margin-bottom:.2rem; color:var(--secondary); }
.id-card-header p{ font-size:1rem; color:var(--primary); font-weight:600; }
.id-card-address{ grid-column:span 2; text-align:center; font-size:.8rem; color:#666;
  padding-bottom:10px; border-bottom:1px dashed #e5e7eb; }

.id-card-photo{
  width:120px; height:120px; border:2px solid #e5e7eb; border-radius:4px;
  overflow:hidden; display:flex; justify-content:center; align-items:center;
  background:#f9fafb;
}
.id-card-photo img{ width:100%; height:100%; object-fit:cover; display:none; }

.id-card-details{ display:flex; flex-direction:column; justify-content:center; }
.id-card-details h3{ color:var(--secondary); margin-bottom:.8rem; font-size:1.1rem; }
.id-card-details p{ margin-bottom:.3rem; font-size:.9rem; }

.id-card-info{
  grid-column:span 2; display:grid; grid-template-columns:1fr 1fr;
  gap:10px; padding:10px 0; border-top:1px dashed #e5e7eb; border-bottom:1px dashed #e5e7eb;
}
.id-card-info p{ margin-bottom:.5rem; font-size:.9rem; }

.id-card-footer{
  grid-column:span 2; display:flex; justify-content:space-between; align-items:center; padding-top:10px;
}
.id-card-signature{ text-align:center; font-style:italic; font-size:.8rem; color:#6b7280; }
.id-card-qr{
  width:70px; height:70px; background:#fff; padding:5px;
  border:1px solid #e5e7eb; border-radius:4px;
  display:flex; justify-content:center; align-items:center;
}

/* Action buttons */
.action-buttons{ display:flex; gap:1rem; justify-content:center; margin-top:1.5rem; }
.action-btn{
  padding:.8rem 1.5rem; border:none; border-radius:4px;
  font-weight:600; cursor:pointer; transition:all .3s ease;
  display:flex; align-items:center; gap:.5rem;
}
.download-btn{ background:var(--success); color:#fff; }
.download-btn:hover{ background:#3aa5d3; }
.reset-btn{ background:#6b7280; color:#fff; }
.reset-btn:hover{ background:#4b5563; }

/* Size controls */
.size-controls{ display:flex; gap:1rem; margin-bottom:1.5rem; justify-content:center; }
.size-option{
  padding:.5rem 1rem; border:2px solid #ddd; border-radius:4px;
  cursor:pointer; transition:all .3s ease;
}
.size-option:hover{ border-color:var(--primary); }
.size-option.active{ background:var(--primary); color:#fff; border-color:var(--primary); }

/* Card size variants */
.id-card.standard{ max-width:500px; padding:20px; font-size:1em; }
.id-card.small{ max-width:350px; padding:15px; font-size:.85em; }
.id-card.large{ max-width:600px; padding:25px; font-size:1.1em; }

.id-card.standard .id-card-photo{ width:120px; height:120px; }
.id-card.small .id-card-photo{ width:90px; height:90px; }
.id-card.large .id-card-photo{ width:140px; height:140px; }

.id-card.standard .id-card-qr{ width:70px; height:70px; }
.id-card.small .id-card-qr{ width:50px; height:50px; }
.id-card.large .id-card-qr{ width:80px; height:80px; }

/* -------------------------------------------------
   Services
   ------------------------------------------------- */
.services-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; }
.service-card{ background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 5px 15px rgba(0,0,0,.05); }
.service-image img{ width:100%; height:200px; object-fit:cover; }
.service-content{ padding:1.5rem; }
.service-content h3{ color:var(--secondary); margin-bottom:1rem; }
.service-content p{ margin-bottom:1rem; }
.service-content ul{ list-style:none; margin-bottom:1.5rem; }
.service-content li{ margin-bottom:.5rem; display:flex; align-items:center; gap:.5rem; }
.service-content li i{ color:var(--success); }

/* -------------------------------------------------
   Contact
   ------------------------------------------------- */
.contact-container{ display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
.contact-details{ display:flex; flex-direction:column; gap:1.5rem; }
.contact-detail{ display:flex; gap:1rem; }
.contact-detail i{ font-size:1.5rem; color:var(--primary); margin-top:.3rem; }
.contact-detail h4{ color:var(--secondary); margin-bottom:.5rem; }
.contact-form{ background:#fff; padding:2rem; border-radius:10px; box-shadow:0 5px 15px rgba(0,0,0,.05); }

/* -------------------------------------------------
   Footer
   ------------------------------------------------- */
footer{ background:var(--dark); color:#fff; padding:2rem 0; text-align:center; margin-top:3rem; }
.footer-content{ display:flex; flex-direction:column; align-items:center; gap:1rem; }
.footer-content .logo h1{ color:#fff; }

/* -------------------------------------------------
   Responsive
   ------------------------------------------------- */
@media (max-width:992px){
  .form-container{ grid-template-columns:1fr 1fr; }
  .preview-column{ grid-column:span 2; order:-1; }
  .contact-container,.about-content{ grid-template-columns:1fr; }
}
@media (max-width:768px){
  .header-content{ flex-direction:column; text-align:center; gap:1rem; }
  nav ul{ flex-direction:column; gap:.5rem; text-align:center; }
  .mobile-menu-btn{ display:block; position:absolute; top:1rem; right:1rem; }
  .nav-menu{ display:none; }
  .nav-menu.active{ display:block; }
  .hero h2{ font-size:2.2rem; }
  .hero p{ font-size:1rem; }
  .form-container{ grid-template-columns:1fr; }
  .preview-column{ grid-column:span 1; }
  .action-buttons{ flex-direction:column; }
  .id-card{ grid-template-columns:1fr; text-align:center; }
  .id-card-header,.id-card-address,.id-card-info,.id-card-footer{ grid-column:1; }
}