/* ===== THEME (Bootstrap ke baad load hoti hai => override) ===== */
:root{
  --brand:#19c463;
  --brand-dark:#0f9a4c;
  --dark:#0a2530;
  --dark-2:#0e3140;
  --light:#f4f8fb;
  --text:#22313a;
  --radius:14px;
  --bs-font-sans-serif:'Cairo',sans-serif;
  --bs-body-font-family:'Cairo',sans-serif;
  --bs-body-color:var(--text);
}
html{scroll-behavior:smooth}
body{font-family:'Cairo',sans-serif;color:var(--text)}
.text-brand{color:var(--brand)}
.btn-brand{background:var(--brand);border-color:var(--brand);color:#fff;border-radius:50px}
.btn-brand:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}
.btn-outline-light{border-radius:50px}

/* header */
.topbar{background:var(--dark);color:#fff;font-size:.85rem;padding:.3rem 0}
.topbar a{color:#fff;text-decoration:none}
.main-navbar{background:var(--dark-2)}
.main-navbar .nav-link{color:#fff}
.main-navbar .nav-link.active,.main-navbar
.nav-link:hover{color:var(--brand);}
.navbar-toggler{color:#fff;font-size:1.8rem;border:0}
/* Navbar links default state */
.navbar-nav .nav-link,
.nav-links a {
    position: relative;
    display: inline-block;
    color: #ffffff; /* ya aapka default link color */
    transition: all 0.3s ease-in-out;
}
/* Desktop screen (> 992px) */
@media (min-width: 992px) {
    .navbar-nav .nav-link {
        color: #ffffff;
    }
}

/* Mobile screen (<= 991px) */
@media (max-width: 991.98px) {
    .navbar-nav .nav-link {
        color: #222222; /* Black color mobile ke liye */
    }
}

/* Hover state: slight lift up + color change */
.navbar-nav .nav-link:hover,
.nav-links a:hover {
    color: var(--brand); /* green accent color */
    transform: translateY(-2px); /* halka sa upar uthega */
}

/* Optional: Active link color */
.navbar-nav .nav-link.active,
.nav-links a.active {
    color: var(--brand);
}

/* hero */
/*.hero{*/
/*    background:var(--dark) url('../img/hero-section-bc.jpg') center/cover;*/
/*    color:#fff;*/
/*    padding:60px 0*/
/*}*/
.hero {
    /* linear-gradient ki madad se dark overlay (0.5 matlab 50% darkness) */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/hero-section-bc.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 60px 0 ;
    padding-bottom: 130px;
    color: white;
}

.hero-title{font-weight:800}
.strip{background:var(--dark);color:#fff;padding:20px 0}
.strip i{font-size:1.8rem;color:var(--brand)}

/* sections */
.section{padding:70px 0}
.section-dark{background:var(--dark) url('../img/why-bg.jpg') center/cover;color:#fff}
.section-light{background:var(--light)}
.section-head{margin-bottom:40px}
.eyebrow{color:var(--brand);font-weight:700;display:block}

/* cards / misc */
.service-card,.step-card,.review-card{border-radius:var(--radius);box-shadow:0 4px 18px rgba(0,0,0,.07);border:0;background:#fff}
.step-card,.review-card{padding:20px}
.icon-circle{width:56px;height:56px;border-radius:50%;background:#fff;color:var(--brand);display:inline-flex;align-items:center;justify-content:center;font-size:1.6rem;box-shadow:0 2px 10px rgba(0,0,0,.1)}
.why-item i{font-size:2.4rem;color:var(--brand)}
.area-pill{display:block;background:#fff;border-radius:50px;padding:.4rem .9rem;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.area-pill i{color:var(--brand)}
.stat{background:#fff;border-radius:var(--radius);padding:10px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.stat b{display:block;font-size:1.3rem}

/* cta + footer */
.cta{background:var(--dark);color:#fff;padding:40px 0}
.site-footer{background:var(--dark-2);color:#cfd8dc;padding:50px 0 15px}
.site-footer a{color:#cfd8dc;text-decoration:none}
.site-footer h6{color:var(--brand)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:30px;padding-top:15px}
/* Footer ul list reset & styling */
footer ul {list-style: none;padding: 0; margin: 0;}
/* Link default state */
footer ul li a , footer ul li:hover{
    color: #cfd8dc; /* normal soft text color */
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease-in-out;
}

/* Hover effect: slight horizontal move + color change */
footer ul li a:hover , footer ul li:hover {
    color: #25D366; /* aapka accent/green theme color */
    transform: translateX(-6px); /* Arabic RTL layout hai to baayein taraf (left) move hoga */
}

/* floating buttons */
.fabs{position:fixed;bottom:20px;left:20px;display:flex;flex-direction:column;gap:10px;z-index:999}
.fab{width:50px;height:50px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.fab-wa{background:#25d366}.fab-call{background:var(--brand-dark)}
.spinner-wrap{position:fixed;inset:0;background:#fff;z-index:9999;display:flex;align-items:center;justify-content:center}


/*page banner and facts*/
.page-banner{background:var(--dark) url('../img/hero-section-bc.jpg') center/cover;color:#fff;padding:60px 0}
.page-banner h1{font-weight:800}
.page-banner a{color:var(--brand);text-decoration:none}
.page-banner .breadcrumb-item.active,.page-banner .breadcrumb-item+.breadcrumb-item::before{color:#fff}
.page-banner{position:relative;isolation:isolate;background:var(--dark) url('../img/hero-section-bc.jpg') center/cover;color:#fff;padding:60px 0;background-attachment: fixed;
             padding-bottom: 150px;padding-top: -30px}
.page-banner::before{content:'';position:absolute;inset:0;z-index:-1;background:rgba(10,37,48,var(--overlay,.6))}


.facts{background:var(--brand);color:#fff;padding:30px 0}
.facts b{display:block;font-size:2rem;font-weight:800}
.text-bold{font-weight: bold;}
.text-underline{text-decoration: underline;}