:root {
    --primary: #c0392b;          /* Red Accent */
    --primary-hover: #a93226;
    --dark: #1e1e1e;             /* Standard Dark text */
    --brand-dark: #1a1a2e;       /* Premium Dark Blue-Purple */
    --light: #f4f6f8;
    --text: #333;
    --muted: #666;
    --maxw: 1200px;
    --shadow: 0 10px 30px rgba(0,0,0,0.08);
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin:0; font-family: 'Inter', sans-serif; color:var(--text); line-height:1.6; overflow-x: hidden; }
  h1,h2,h3,h4,h5 { font-family: 'Poppins', sans-serif; margin-top:0; color:var(--brand-dark); line-height: 1.2; }
  a { text-decoration:none; color:inherit; transition:0.3s; }
  ul { padding-left:20px; }
  img { max-width:100%; display:block; }
  
  /* ANIMATIONS */
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-on-scroll { animation: fadeInUp 0.8s ease-out forwards; opacity: 0; }
  
  /* LAYOUT */
  .container { max-width:var(--maxw); margin:0 auto; padding:0 20px; position: relative; }
  section { padding: 80px 0; }
  .grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap:40px; }
  
  /* HEADER */
  header { background:white; box-shadow:0 4px 20px rgba(0,0,0,0.05); position:sticky; top:0; z-index:1000; }
  .nav { display:flex; justify-content:space-between; align-items:center; height:80px; }
  
  .logo { display:flex; align-items:center; gap:12px; font-weight:700; color:var(--brand-dark); font-size:20px; }
  .logo img { max-height: 50px; width: auto; }
  .logo-text { display:flex; flex-direction:column; line-height:1; }
  .logo-title { font-size: 20px; font-weight: 800; letter-spacing: -0.5px; color: var(--primary); }
  .logo-subtitle { font-size: 11px; color: var(--brand-dark); font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }
  
  .menu { display:flex; gap:30px; font-weight:500; }
  .menu a { font-size: 15px; color: var(--brand-dark); font-weight: 600; }
  .menu a:hover, .menu a.active { color:var(--primary); }
  
  /* BUTTONS */
  .cta { display:flex; gap:15px; align-items: center; }
  .btn { background:var(--primary); color:white; padding:12px 30px; border-radius:50px; font-weight:600; display:inline-block; border: none; cursor: pointer; box-shadow: 0 5px 15px rgba(192, 57, 43, 0.3); }
  .btn:hover { background:var(--primary-hover); transform:translateY(-2px); box-shadow: 0 8px 20px rgba(192, 57, 43, 0.4); }
  .btn-ghost { border:2px solid var(--primary); color:var(--primary); padding:10px 25px; border-radius:50px; font-weight:600; display:inline-block; }
  .btn-ghost:hover { background: var(--primary); color: white; }
  .whatsapp-link { background:#25D366; color:white; box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3); }
  .whatsapp-link:hover { background:#20b857; }
  .btn-insta { border: 2px solid #E1306C; color: #E1306C; padding: 10px 25px; border-radius: 50px; font-weight: 600; display: flex; align-items: center; gap: 8px; transition: 0.3s; }
  .btn-insta:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: white; border-color: transparent; }
  
  /* MOBILE */
  .mobile-toggle { display: none; flex-direction: column; gap: 6px; cursor: pointer; }
  .bar { width: 28px; height: 3px; background-color: var(--brand-dark); border-radius: 3px; }
  
  /* COMPONENTS */
  .hero { height:600px; background-size:cover; background-position:center; position:relative; display:flex; align-items:center; }
  .hero::before { content:''; position:absolute; inset:0; background: linear-gradient(to right, rgba(26, 26, 46, 0.9), rgba(26, 26, 46, 0.6), rgba(0,0,0,0.2)); }
  .hero-inner { position:relative; z-index:1; padding-top: 20px; }
  .hero h1 { font-size:52px; margin-bottom:20px; color:white; font-weight: 800; line-height: 1.1; }
  
  .section-title { 
    font-size: 36px; font-weight: 800; text-align: center; margin-bottom: 50px; 
    position: relative; display: block; margin-left: auto; margin-right: auto;
  }
  .section-title::after { content: ''; display: block; width: 60px; height: 4px; background: var(--primary); margin: 15px auto 0; border-radius: 2px; }
  
  .service-card { background:white; padding: 0; border-radius:15px; overflow: hidden; box-shadow: var(--shadow); transition:0.3s; }
  .service-card:hover { transform:translateY(-8px); box-shadow: 0 15px 40px rgba(0,0,0,0.12); }
  .card-img-wrap { height:220px; overflow:hidden; }
  .card-img-wrap img { width:100%; height:100%; object-fit:cover; transition:0.5s; }
  .service-card:hover img { transform:scale(1.1); }
  .service-content { padding: 25px; text-align: center; }
  
  .proj { position:relative; border-radius:12px; overflow:hidden; cursor:pointer; height: 300px; box-shadow: var(--shadow); }
  .proj img { width:100%; height:100%; object-fit:cover; transition:0.5s; }
  .proj:hover img { transform:scale(1.1); }
  .proj-info { position:absolute; bottom:0; left:0; right:0; padding: 25px 20px; background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.6), transparent); color:white; z-index: 2; }
  .proj-info h5 { color: white; margin: 0 0 5px 0; font-size: 18px; }
  .proj-info p { color: rgba(255,255,255,0.8); font-size: 14px; margin: 0; }
  
  /* SPEC CARDS */
  .specs-section { background: white; position: relative; }
  .spec-card {
      background: white; padding: 40px 30px; border-radius: 20px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.08); transition: all 0.4s ease;
      border-bottom: 4px solid transparent; 
      text-align: center; display: flex; flex-direction: column; align-items: center;
  }
  .spec-card:hover { transform: translateY(-10px); border-bottom-color: var(--primary); box-shadow: 0 20px 50px rgba(192, 57, 43, 0.15); }
  .spec-icon-box {
      width: 60px; height: 60px; background: rgba(192, 57, 43, 0.1);
      color: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center;
      margin: 0 auto 20px; 
  }
  .spec-icon-box svg { width: 30px; height: 30px; }
  
  /* SERVICE PANELS (Used for Contact Box too) */
  .service-text-panel {
      background: white; padding: 40px; border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.05);
      position: relative; overflow: hidden;
  }
  .service-text-panel::before {
      content: ''; position: absolute; left: 0; top: 20px; bottom: 20px;
      width: 4px; background: var(--primary); border-radius: 0 4px 4px 0;
  }
  
  /* NEW: MAP CARD */
  .map-card {
      border-radius: 20px; overflow: hidden;
      box-shadow: 0 10px 30px rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.05);
      height: 100%; min-height: 350px;
  }
  
  /* FEATURES & GUARANTEE */
  .features-container { margin-top: 70px; padding-top: 40px; border-top: 1px solid #e0e0e0; }
  .features-bar { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 30px; text-align: center; }
  .feature-item { display: flex; flex-direction: column; align-items: center; gap: 15px; transition: 0.3s; }
  .feature-item:hover { transform: scale(1.05); }
  .feature-icon-circle {
      width: 80px; height: 80px; background: white; border: 2px solid #eee; border-radius: 50%;
      display: flex; align-items: center; justify-content: center; color: var(--dark); transition: 0.3s;
  }
  .feature-item:hover .feature-icon-circle { border-color: var(--primary); color: var(--primary); background: rgba(192, 57, 43, 0.05); }
  .feature-icon-circle svg { width: 35px; height: 35px; }
  .feature-label { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--dark); }
  
  .guarantee-section {
      background: var(--brand-dark); color: white;
      text-align: center; padding: 100px 20px; position: relative; overflow: hidden;
  }
  .guarantee-section::before {
      content: ''; position: absolute; inset: 0; opacity: 0.05;
      background-image: radial-gradient(circle at 2px 2px, rgba(255,255,255,0.8) 1px, transparent 0);
      background-size: 20px 20px;
  }
  .guarantee-badge-premium {
      width: 150px; height: 150px; 
      background: linear-gradient(135deg, #FFD700, #E6AC00);
      border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
      color: var(--dark); margin: 0 auto 35px; border: 5px solid white;
      box-shadow: 0 0 0 5px #E6AC00, 0 20px 50px rgba(0,0,0,0.5);
      position: relative;
  }
  .guarantee-badge-premium .year { font-size: 48px; font-weight: 800; line-height: 1; text-shadow: 1px 1px 2px rgba(255,255,255,0.5); }
  .guarantee-badge-premium .text { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-top: 5px; }
  .guarantee-title { font-size: 36px; font-weight: 700; margin-bottom: 20px; color: #FFD700; }
  
  /* ABOUT PAGE CARDS */
  .owner-card {
      background: white; border: 1px solid #eee; border-radius: 12px;
      padding: 30px; display: flex; align-items: center; gap: 20px;
      box-shadow: var(--shadow); transition: 0.3s; position: relative; overflow: hidden;
  }
  .owner-card:hover { transform: translateY(-5px); border-color: var(--primary); }
  .owner-card::after { 
      content:''; position: absolute; top:0; left:0; width: 5px; height: 100%; background: var(--primary); 
  }
  .owner-icon {
      width: 60px; height: 60px; background: rgba(192, 57, 43, 0.1); color: var(--primary);
      border-radius: 50%; display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
  }
  
  /* LIGHTBOX */
  .lightbox {
      position: fixed; z-index: 2000; top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.9); display: flex; align-items: center; justify-content: center;
      opacity: 0; pointer-events: none; transition: 0.3s;
  }
  .lightbox.active { opacity: 1; pointer-events: all; }
  .lightbox-img { max-width: 90%; max-height: 90%; border-radius: 5px; box-shadow: 0 0 20px rgba(0,0,0,0.5); }
  .lightbox-close {
      position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; cursor: pointer;
  }
  .lightbox-prev, .lightbox-next {
      position: absolute; top: 50%; transform: translateY(-50%);
      background: rgba(255,255,255,0.1); color: white; border: none;
      padding: 15px; cursor: pointer; font-size: 24px; border-radius: 50%; transition: 0.3s;
  }
  .lightbox-prev:hover, .lightbox-next:hover { background: var(--primary); }
  .lightbox-prev { left: 20px; }
  .lightbox-next { right: 20px; }
  
  /* FOOTER */
  footer { background: var(--brand-dark); color:white; padding: 80px 0 30px; }
  footer h4 { color:white; margin-bottom:25px; font-size: 20px; }
  footer a { color:rgba(255,255,255,0.6); display:inline-block; margin-bottom:12px; font-size: 15px; }
  footer a:hover { color:white; transform:translateX(5px); }
  
  @media (max-width: 768px) {
    .nav { padding: 0 20px; }
    .mobile-toggle { display: flex; } 
    .menu { display: none; position: absolute; top: 80px; left: 0; width: 100%; background: white; flex-direction: column; padding: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); gap: 20px; text-align: center; }
    .menu.active { display: flex; }
    .cta { display: none; }
    .hero h1 { font-size: 36px; }
    .grid { gap: 20px; }
    .owner-card { flex-direction: column; text-align: center; }
    .owner-card::after { width: 100%; height: 5px; top: 0; left: 0; }
  }
  
  /* --- NEW: FIX FOR CONTACT SECTION ON MOBILE --- */
  .contact-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: stretch;
  }
  
  @media (max-width: 900px) {
    .contact-split {
      grid-template-columns: 1fr; /* Force 1 column on Tablet/Mobile */
      gap: 30px;
    }
    .map-card {
      min-height: 300px; /* Ensure map has height on mobile */
    }
    /* Fix email overflow on mobile */
    .service-text-panel > div[style*="display:flex"] > div[style*="display:flex"] {
      flex-wrap: wrap !important;
      align-items: flex-start !important;
    }
    .service-text-panel span {
      word-break: break-word;
      overflow-wrap: break-word;
      max-width: 100%;
      display: inline-block;
    }
  }