:root {--bg:#1f2f59; --panel:#121829; --ink:#f1f5f0; --muted:#cbd9f7; --accent:#fff; --accent2:#f26022; }
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{position:sticky;font-family:Segoe UI,system-ui,-apple-system,sans-serif;color:var(--ink);line-height:1.6;background:linear-gradient(to top, rgba(5, 1, 0, 0.8) 0%, rgba(5, 1, 0, .9) 100%), url('titlebg.png') top/contain no-repeat fixed;)}

a{color:inherit;text-decoration:none;margin-right:0px;-margin-left:0px;font-size:1.0rem;}
.container{max-width:1080px;margin:0 auto;padding:10px;}
.site-header{position:sticky;top:0;z-index:50;background:var(--panel);border-bottom:1px solid #334155;}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding-bottom:0px ;}
.brand{display:flex;gap:14px;align-items:center}
.brand .name{font-weight:700;color:var(--accent)}
.top-nav{max-width:1300px;background:#0008b;letter-spacing:0px;font-size:1.0rem;font-weight:600;;}
.top-nav a{margin-left:18px;color:var(--muted);letter-spacing:0px;font-size:1.0rem;font-weight:600;}
.top-cta{display:none}


.top-nav a {padding:5px;
  text-decoration: none;
  position: relative;letter-spacing:0px;font-size:0.9rem;font-weight:600;
}



.top-nav a:hover {color:grey;}



/* Floating Chat Button */
.chat-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #f97316; /* orange accent */
  color: white;
  font-weight: bold;
  padding: 14px 22px;
  border-radius: 30px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  text-decoration: none;
  z-index: 1000;
  transition: background 0.3s ease;
}

.chat-button:hover {
  background: #dc2626; /* darker red/orange on hover */
}

h1{color:#cbd9f7;}

@media (min-width:860px){ .top-cta{display:flex;gap:16px;align-items:center;color:var(--muted)} .top-cta a.btn{margin:0} }

.btn{display:inline-block;background:var(--accent2);color:white;padding:10px 18px;border-radius:8px;font-weight:700}
.btn.alt{background:white;color:var(--accent2)}
.btn:hover{opacity:.9}


.hero{text-align:center;padding:15px}
.hero h1{font-size:38px;margin:0 0 10px;color:var(--accent);padding:10px}
.hero p{color:var(--muted);max-width:720px;margin:0 auto 18px}

.section{padding:48px 0;text-align:left}
.section h2{color:var(--accent);text-align:left;margin:0 0 18px;padding:10px}
.section p {color:var(--accent);text-align:left;margin:0 0 18px;padding:10px}
.section ul {color:var(--accent);text-align:left;margin:0 0 18px;}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--panel);border:1px solid #fff;border-radius:12px;padding:18px;padding:10px}
.card h3{margin-top:0;padding:10px}
.card p{color:var(--muted);padding:10px;}



.kv{display:grid;grid-template-columns:1fr;gap:22px;background:none;border-radius:20px;border:none;padding:25px;}
@media(min-width:900px){.kv{grid-template-columns:1.2fr .8fr;}}

blockquote{background:none;color:#121829;font-style:italic;border-left:0px solid var(--accent);border-top:0px solid white;border-right:0px solid white;border-bottom:0px solid white;padding:14px 16px;border-radius:8px;margin:10px 0;}
small, .muted{color:#121829;font-weight:700;font-style:normal;}

.map iframe{width:100%;height:320px;border:0;border-radius:12px}

.footer{background:var(--panel);border-top:1px solid #334155}
.footer .cols{display:grid;gap:18px;grid-template-columns:1fr; padding:28px 0}
@media(min-width:900px){.footer .cols{grid-template-columns:2fr 1fr 1fr}}
.footer a{color:var(--muted)} .footer a:hover{color:var(--accent)}
.copy{padding:16px 0;text-align:center;color:var(--muted);font-size:14px;border-top:1px solid #334155}

.form{display:grid;gap:12px}
input,textarea,select{width:100%;padding:10px;border-radius:8px;border:1px solid #334155;background:#0b1223;color:var(--ink)}
label{font-weight:600}
table{width:100%;border-collapse:collapse}
th,td{border-bottom:1px solid #334155;padding:10px;text-align:left}
.badge{display:inline-block;background:#0b1223;border:1px solid #334155;border-radius:999px;padding:6px 10px;color:var(--muted);font-size:12px}
.cta-band{background:var(--accent2);color:white;text-align:center;border-radius:12px;padding:22px}
.kv-box{background:grey;color:white;text-align:center;border-radius:12px;padding:22px;border-left:0px solid #ffffff;border-top:1px solid #ffffff;border-right:1px solid #ffffff;border-bottom:1px solid #ffffff;}

/* Floating Chat Button */
.chat-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #f97316;
  color: white;
  font-weight: bold;
  padding: 14px 22px;
  border-radius: 30px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  text-decoration: none;
  z-index: 1000;
  transition: background 0.3s ease;
}

.chat-button:hover {
  background: #dc2626;
}



/* === Nav Bar Styling === */
.site-header { box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
.top-nav a {font-weight:600;
  margin-left: 18px;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background 0.3s, color 0.3s;
}


.menu-toggle { display:none}

@media (max-width: 860px) {
  .top-nav { display:none; flex-direction:column; background: var(--panel,#1e293b); position:absolute; top:60px; right:20px;
             border:1px solid #334155; border-radius:8px; padding:12px; z-index:1000; animation: slideDown 0.3s ease; }
  .top-nav.show { display:flex; }
  .menu-toggle { display:block;font-size:0.8rem; background:none; border:none; color:var(--ink,#f1f5f9); cursor:pointer; }
  .top-cta { display:none; }
}
@keyframes slideDown { from {opacity:0; transform:translateY(-10px);} to {opacity:1; transform:translateY(0);} }

/* === Service Cards with Icons === */
.service-card { background: var(--panel,#1e293b); border:1px solid #334155; border-radius:12px; padding:18px; text-align:center; transition: transform 0.3s, box-shadow 0.3s; }
.service-card:hover { transform: translateY(-6px); box-shadow:0 6px 18px rgba(0,0,0,0.4); }
.service-card svg { width:48px; height:48px; fill:white; margin-bottom:10px; transition: fill 0.3s; }
.service-card:hover svg { fill: var(--accent,#f97316); }

/* === Testimonials === */
.testimonial { background: NONE; padding:16px; border-left:0px solid var(--accent,#f97316); border-radius:8px; margin:10px 0; font-style:italic; }
.testimonial .stars { color:#facc15; margin-bottom:6px; }
.testimonial .name { font-weight:bold; margin-top:8px; display:block; }

/* === Sticky mobile action bar === */
.mob-actions { display:none; }
@media (max-width: 860px) {
  .mob-actions { position:fixed; left:0; right:0; bottom:0; background:#111827; 
    display:flex; gap:8px; padding:10px; justify-content:center; z-index:999; border-top:1px solid #334155; }
  .mob-actions a { display:inline-block; padding:10px 14px; border-radius:8px; font-weight:700; text-align:center; color:#fff; }
  .mob-actions .call { background:#10b981; }
  .mob-actions .quote { background:#f97316; }
  body { padding-bottom:64px; }
}



/* === NAV PRO CLEAN === */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

.site-header {
  background: #0f172a;
  padding: 14px 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.top-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 24px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}
.top-nav a {
  color: #e5e7eb;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background 0.3s, color 0.3s;

}
.top-nav a.active {letter-spacing:0px;text-transform:none;font-size:1.0rem;font-weight:600;
  color: #f97316;
}
.top-nav a.active::before {
  content: '⚙️';
  margin-left: 6px;
  display: inline-block;
  font-size: 14px;
  vertical-align: middle;
}
.top-nav a.active.loading::before {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.menu-toggle {
  display: none;
  font-size: 0.8rem;
  background: none;
  border: none;
  color: #f1f5f9;
  cursor: pointer;
}
@media (max-width: 860px) {
  .top-nav {
    display: none;
    flex-direction: column;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,.45);
    width: 250px;
    padding: 10px;
    position: absolute;
    top: 60px;
    right: 20px;
    z-index: 1000;
  }
  .top-nav.show { display: flex; }
  .top-nav a { display: block; margin: 6px 0; }
  .menu-toggle { display: block; }
}

/* === Contact Form Styling === */
.contact-form {
  max-width: 500px;
  margin: 20px auto;
  background:#1e293b;
  padding:20px;
  border-radius:10px;
  box-shadow:0 4px 12px rgba(0,0,0,0.4);
}
.contact-form label {
  display:block;
  margin:12px 0 6px;
  color:#e5e7eb;
  font-weight:600;
}
.contact-form input,
.contact-form textarea {
  width:100%;
  padding:10px;
  border:1px solid #334155;
  border-radius:6px;
  background:#0f172a;
  color:#f1f5f9;
}
.contact-form button {
  margin-top:14px;
  padding:12px 18px;
  background:#f97316;
  border:none;
  border-radius:6px;
  color:#fff;
  font-weight:700;
  cursor:pointer;
  transition:background .3s;
}
.contact-form button:hover {
  background:#ea580c;
}



/* === Logo & Nav Professional Styling === */
.logo-img {
  height: 170px;
  width: auto;
  display: block;
}
.top-nav {
  display: flex;
  gap: 20px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}
.top-nav a {
  color: #e5e7eb;
  padding: 0px 0px;
  border-radius: 6px;
  transition: background 0.3s, color 0.3s;
}

}
.top-nav a.active {
  color: #f97316;
}
.top-nav a.active::before {
  content: '⚙️';
  margin-left: 6px;
  display: inline-block;
  font-size: 14px;
  vertical-align: middle;
 animation: spin 1s linear;
}
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@media (max-width: 860px) {
  .menu-toggle { display:block; }
  .top-nav {
    display: none;
    flex-direction: column;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,.45);
    position: absolute;
    top: 60px;
    right: 20px;
    width: 70px;
    z-index: 1000;
  }
  .top-nav.show { display: flex; }
  .top-nav a { margin: 6px 0; }
}



/* === Mobile Nav Fixes (appended) === */
.menu-toggle { display: none; }
@media (max-width: 1024px) {
  
  .menu-toggle {
    display: block !important;
    font-size: 28px;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    margin-left: auto;
    position: relative;
    z-index: 2000;
  }
  .top-nav {
    display: none;
    flex-direction: column;
    width: 50%;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 8px;
    margin-top: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,.45);
  }
  .top-nav.show { display: flex; }
  .top-nav a { padding: 14px; border-bottom: 1px solid #334155; }
}

.bg-layer-tp {background-color:rgba(0,0,11,0.4);border-radius:25px;padding-left:15px;}
    

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* Slider container */
.testimonial-slider {
    border:1px solid #FFF;
  position: relative;
  overflow: hidden;
  height: 320px;
  background: #1e293b;
  border-radius:20px;
}

/* Testimonials */
.testimonial {
  position: absolute;
  top: 0; left: 0;
  width: 100%;height:180px;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  background: NONE;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0px 0px rgba(0,0,0,0.25);
}
.testimonial.active {
  opacity: 1;
  transform: translateX(0);
  position: relative;
}

/* Navigation arrows */
.testimonial-prev,
.testimonial-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(30, 41, 59, 0.7);
  color: #fff;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 50%;
  font-size: 18px;
  transition: background 0.3s;
  z-index: 2;
}
.testimonial-prev:hover,
.testimonial-next:hover {
  background: rgba(249, 115, 22, 0.9); /* orange accent */
}
.testimonial-prev { left: 10px; }
.testimonial-next { right: 10px; }

/* Navigation dots */
.testimonial-dots {
  text-align: center;
  margin-top: 12px;
}
.testimonial-dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  margin: 0 4px;
  background: #475569;
  cursor: pointer;
  transition: background 0.3s;
}
.testimonial-dots button.active {
  background: #f97316; /* orange accent */
}

.testimonial-author img{
    width:120px;
    height:60px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid #334155;
    background:#fff;
    flex-shrink:0;
    
}