/* Base */
* {margin:0; padding:0; box-sizing:border-box;}
body {font-family:'Poppins', sans-serif; line-height:1.6; color:#111; background:#fff;}
.container {width:90%; max-width:1200px; margin:auto;}

/* Header */
header {background:#0D1B2A; color:#fff; padding:1rem 0; position:sticky; top:0; z-index:100;}
.header-container {display:flex; justify-content:space-between; align-items:center;}
.logo {font-family:'Orbitron', sans-serif; font-weight:700; font-size:1.8rem;}
.logo span {color:#FCA311;}
header nav ul {display:flex; justify-content:flex-end; list-style:none;}
header nav ul li {margin-left:2rem;}
header nav ul li a {color:#fff; text-decoration:none; font-weight:600; transition:0.3s;}
header nav ul li a:hover {color:#FCA311;}

/* Hero */
.hero {background:linear-gradient(135deg, #F95738, #FFCA3A); color:#fff; padding:6rem 0; text-align:center;}
.hero h2 {font-family:'Orbitron', sans-serif; font-size:3rem; margin-bottom:1rem; text-shadow:2px 2px #111;}
.hero p {margin-bottom:2rem; font-size:1.2rem;}

/* Buttons */
.btn {display:inline-block; padding:0.8rem 2rem; background:#0D1B2A; color:#fff; border-radius:50px; font-weight:700; text-decoration:none; transition:0.3s; border:none; cursor:pointer;}
.btn:hover {background:#FCA311; color:#0D1B2A;}
.btn-secondary {background:#F95738;}
.btn-secondary:hover {background:#0D1B2A; color:#fff;}

/* Sections */
section {padding:4rem 0;}
.section-title {text-align:center; font-size:2.5rem; margin-bottom:3rem; font-weight:800; color:#0D1B2A; text-transform:uppercase; letter-spacing:2px;}

/* Page Header */
.page-header {background:linear-gradient(135deg, #0D1B2A, #1B3A4B); color:#fff; padding:4rem 0; text-align:center;}
.page-header h2 {font-family:'Orbitron', sans-serif; font-size:3rem; margin-bottom:1rem;}
.page-header p {font-size:1.2rem; opacity:0.9;}

/* Services Grid (Home) */
.services-grid {display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:2rem;}
.service-card {padding:2rem; border-radius:15px; color:#fff; text-align:center; transition:transform 0.3s, box-shadow 0.3s;}
.service-card h3 {margin-bottom:1rem; font-family:'Orbitron', sans-serif; font-size:1.5rem;}
.service-1 {background:#F94144;}
.service-2 {background:#F3722C;}
.service-3 {background:#F9C74F; color:#111;}
.service-4 {background:#90BE6D;}
.service-card:hover {transform:translateY(-10px); box-shadow:0 10px 25px rgba(0,0,0,0.2);}

/* Services Detail Page */
.services-detail {padding:3rem 0;}
.service-detail-card {background:#f8f9fa; padding:2.5rem; border-radius:15px; margin-bottom:3rem; border-left:5px solid #FCA311;}
.service-detail-card h3 {color:#0D1B2A; font-size:2rem; margin-bottom:1rem; font-family:'Orbitron', sans-serif;}
.service-tagline {font-size:1.1rem; color:#555; margin-bottom:2rem;}
.service-columns {display:grid; grid-template-columns:1fr 1fr; gap:2rem;}
.service-col h4 {color:#0D1B2A; margin-bottom:1rem; font-size:1.3rem;}
.service-col ul {list-style:none; padding:0;}
.service-col ul li {padding:0.5rem 0; padding-left:1.5rem; position:relative;}
.service-col ul li:before {content:"✓"; position:absolute; left:0; color:#90BE6D; font-weight:bold;}
.result-box {background:#FCA311; color:#fff; padding:1rem; border-radius:8px; margin-top:1.5rem; font-weight:600;}

/* Pricing Section */
.pricing-section {padding:3rem 0;}
.pricing-category {text-align:center; font-size:2rem; color:#0D1B2A; margin:3rem 0 2rem 0; font-weight:700;}
.pricing-grid {display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:2rem; margin-bottom:3rem;}
.pricing-card {background:#fff; border:2px solid #e0e0e0; border-radius:15px; padding:2rem; text-align:center; transition:transform 0.3s, box-shadow 0.3s; position:relative;}
.pricing-card:hover {transform:translateY(-5px); box-shadow:0 10px 30px rgba(0,0,0,0.15);}
.pricing-card.featured {border:3px solid #FCA311; background:#FFF9E6;}
.featured-badge {position:absolute; top:-15px; right:20px; background:#FCA311; color:#fff; padding:0.4rem 1rem; border-radius:20px; font-weight:700; font-size:0.9rem;}
.pricing-card h4 {color:#0D1B2A; font-size:1.5rem; margin-bottom:1rem;}
.price {font-size:2rem; color:#F95738; font-weight:800; margin-bottom:1.5rem;}
.price span {font-size:1rem; color:#666;}
.pricing-card ul {list-style:none; padding:0; margin:1.5rem 0; text-align:left;}
.pricing-card ul li {padding:0.5rem 0; padding-left:1.5rem; position:relative;}
.pricing-card ul li:before {content:"✓"; position:absolute; left:0; color:#90BE6D; font-weight:bold;}
.best-for {font-size:0.9rem; color:#666; margin:1.5rem 0;}

/* Add-ons */
.addon-grid {display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:1.5rem; margin-bottom:3rem;}
.addon-card {background:#f8f9fa; padding:1.5rem; border-radius:10px; text-align:center; border:2px solid #e0e0e0;}
.addon-card h5 {color:#0D1B2A; margin-bottom:0.5rem; font-size:1.1rem;}
.addon-price {color:#F95738; font-weight:700; font-size:1.1rem;}

/* Pricing Info */
.pricing-info {background:#0D1B2A; color:#fff; padding:2.5rem; border-radius:15px; margin-top:3rem;}
.pricing-info h3 {color:#FCA311; margin-bottom:1rem;}
.pricing-info ul {margin:1rem 0;}
.pricing-info ul li {margin:0.5rem 0;}

/* Contact Section */
.contact-section {padding:3rem 0;}
.contact-grid {display:grid; grid-template-columns:1.5fr 1fr; gap:3rem;}
.contact-form-wrapper h3, .contact-info-wrapper h3 {color:#0D1B2A; margin-bottom:1.5rem; font-size:1.8rem;}
.contact-form {display:flex; flex-direction:column; gap:1rem;}
.contact-form input, .contact-form textarea {padding:1rem; border-radius:10px; border:1px solid #ccc; font-size:1rem; font-family:'Poppins', sans-serif;}
.contact-form textarea {resize:none; min-height:150px;}
.contact-form button {width:100%;}

/* Contact Methods */
.contact-method {background:#f8f9fa; padding:1.5rem; border-radius:10px; margin-bottom:1.5rem;}
.contact-method h4 {color:#0D1B2A; margin-bottom:0.5rem;}
.contact-method p {color:#666; font-size:0.95rem; margin-bottom:1rem;}
.btn-whatsapp {display:inline-flex; align-items:center; gap:0.5rem; background:#25D366; color:#fff; padding:0.8rem 1.5rem; border-radius:50px; text-decoration:none; font-weight:700; transition:0.3s;}
.btn-whatsapp:hover {background:#20BA5A;}
.contact-link {color:#F95738; text-decoration:none; font-weight:600;}
.contact-link:hover {text-decoration:underline;}

/* About Content */
.about-content {padding:3rem 0;}
.about-intro {max-width:800px; margin:0 auto 3rem auto; text-align:center; font-size:1.2rem; color:#333;}
.about-grid {display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:2rem;}
.about-card {background:#f8f9fa; padding:2rem; border-radius:15px; border-left:5px solid #FCA311;}
.about-card h3 {color:#0D1B2A; margin-bottom:1rem; font-size:1.5rem;}
.about-card ul {list-style:none; padding:0;}
.about-card ul li {padding:0.5rem 0; padding-left:1.5rem; position:relative;}
.about-card ul li:before {content:"✓"; position:absolute; left:0; color:#90BE6D; font-weight:bold;}

/* CTA Section */
.cta-section {background:linear-gradient(135deg, #F95738, #FFCA3A); color:#fff; padding:4rem 0; text-align:center;}
.cta-section h2 {font-size:2.5rem; margin-bottom:1rem; font-family:'Orbitron', sans-serif;}
.cta-section p {font-size:1.2rem; margin-bottom:2rem;}
.cta-buttons {display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;}

/* About (Home) */
#about p {max-width:700px; margin:auto; text-align:center; font-size:1.1rem; color:#333;}

/* Footer */
footer {background:#0D1B2A; color:#fff; text-align:center; padding:1rem 0; margin-top:2rem;}

/* Responsive */
@media (max-width: 768px) {
  .header-container {flex-direction:column; text-align:center;}
  header nav ul {margin-top:1rem; justify-content:center;}
  header nav ul li {margin:0 0.8rem;}
  .hero h2 {font-size:2rem;}
  .service-columns {grid-template-columns:1fr;}
  .pricing-grid {grid-template-columns:1fr;}
  .contact-grid {grid-template-columns:1fr;}
  .cta-buttons {flex-direction:column; align-items:center;}
  .about-grid {grid-template-columns:1fr;}
}