: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
========================== */




/* =========================================================
   GLOBAL RESPONSIVE BASE
========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: clip;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg,
video,
iframe {
    max-width: 100%;
}