:root{
 --primary:#0d6efd;
 --dark:#0f172a;
 --soft-bg:#f8fafc;
}

body{
 padding-top:70px;
 background:var(--soft-bg);
 font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* HERO */
.hero{
 background:
 linear-gradient(135deg,#020617 0%,#0f172a 60%,#1e293b 100%);
 color:white;
 padding:120px 0;
}

.hero h1{
 font-weight:700;
 letter-spacing:.3px;
}

.hero p{
 opacity:.85;
}



/* SECTION */
.section{
 padding:90px 0;
}

/* SERVICE CARD */
.icon-box{
 background:#fff;
 border-radius:16px;
 padding:35px 28px;
 box-shadow:0 10px 30px rgba(2,6,23,.06);
 transition:all .3s ease;
 height:100%;
 border:1px solid rgba(0,0,0,.04);
}

.icon-box:hover{
 transform:translateY(-8px);
 box-shadow:0 20px 45px rgba(2,6,23,.12);
}

/* SERVICE TITLE */
.icon-box h5{
 font-weight:600;
 margin-bottom:10px;
}

/* PRICE */
.price{
 font-size:1.6rem;
 font-weight:700;
 color:var(--primary);
 margin-top:15px;
}

/* CTA SECTION */
.cta{
 background:white;
 border-radius:20px;
 padding:60px;
 box-shadow:0 10px 35px rgba(0,0,0,.06);
}

/* MOBILE CTA */
@media(max-width:768px){
 .cta{
   padding:35px 20px;
 }
}

html{
 scroll-behavior:smooth;
}


/* FOOTER */
footer{
 background:#020617;
 color:#94a3b8;
}

.footer-links{
 list-style:none;
 padding:0;
}

.footer-links li{
 margin-bottom:8px;
}

.footer-links a{
 color:#94a3b8;
 text-decoration:none;
 transition:.2s;
}

.footer-links a:hover{
 color:white;
 padding-left:5px;
}

/* SOCIAL ICONS */
.social-icons{
 display:flex;
 flex-wrap:wrap;
 gap:10px;
}

.social{
 width:38px;
 height:38px;
 display:flex;
 align-items:center;
 justify-content:center;
 border-radius:50%;
 background:#0f172a;
 color:white;
 text-decoration:none;
 transition:.25s;
 font-size:18px;
}

.social:hover{
 transform:translateY(-3px);
 background:#0d6efd;
 color:white;
}

/* divider */
.footer-divider{
 border-color:rgba(255,255,255,.08);
 margin:35px 0 20px;
}
footer h5,
footer h6{
 color:white;
}
/* ==========================
   MODERN NAVBAR STYLE
========================== */

#mainNavbar {
    transition: all 0.35s ease;
    padding: 18px 0;
    background: transparent;
}

/* Scrolled State */
#mainNavbar.scrolled {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    padding: 8px 0;
}

.navbar .nav-link.active {
    color: #38bdf8 !important;
    font-weight: 600;
    position: relative;
}

.navbar .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 2px;
    background: #38bdf8;
}
.btn-modern {
    background: linear-gradient(135deg,#2563eb,#7c3aed);
    border: none;
    color: white;
    padding: 10px 22px;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.btn-modern:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}