/* ===================================
   Dainik Focus Frontend Theme
=================================== */

:root{

    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --secondary:#6366f1;

    --dark:#0f172a;
    --light:#f8fafc;

    --gray:#64748b;

    --success:#22c55e;
    --danger:#ef4444;
    --warning:#f59e0b;

    --radius:22px;

}

/* =======================
   Base
======================= */

html{

    scroll-behavior:smooth;

}

body{

    font-family:Inter,sans-serif;

    background:#ffffff;

    color:var(--dark);

    overflow-x:hidden;

}

section{

    position:relative;

}

/* =======================
   Heading
======================= */

.display-1,
.display-2,
.display-3,
.display-4,
.display-5{

    font-weight:800;

    letter-spacing:-1px;

}

.lead{

    font-size:1.15rem;

    line-height:1.9;

}

/* =======================
   Gradient Background
======================= */

.bg-gradient-primary{

    background:
    linear-gradient(
    135deg,
    #2563eb,
    #4f46e5,
    #7c3aed);

}

/* =======================
   Glass Effect
======================= */

.glass{

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(16px);

    border:1px solid rgba(255,255,255,.15);

}

/* =======================
   Buttons
======================= */

.btn{

    border-radius:999px;

    transition:.35s;

    font-weight:600;

}

.btn-lg{

    padding:.95rem 2.2rem;

}

.btn:hover{

    transform:translateY(-3px);

}

/* =======================
   Cards
======================= */

.card{

    border:none;

    border-radius:var(--radius);

    transition:.35s;

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 20px 50px rgba(0,0,0,.08);

}

/* =======================
   Icons
======================= */

.icon-box{

    width:72px;

    height:72px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

}

/* =======================
   Shadows
======================= */

.shadow-soft{

    box-shadow:

    0 20px 60px

    rgba(37,99,235,.10);

}

.shadow-hover:hover{

    box-shadow:

    0 30px 80px

    rgba(37,99,235,.16);

}

/* =======================
   Badges
======================= */

.badge{

    font-weight:600;

    letter-spacing:.5px;

}

/* =======================
   Image
======================= */

img{

    max-width:100%;

}

/* =======================
   Responsive
======================= */

@media(max-width:768px){

.display-1{

    font-size:3rem;

}

.display-2{

    font-size:2.5rem;

}

.display-3{

    font-size:2.2rem;

}

.display-4{

    font-size:2rem;

}

.display-5{

    font-size:1.7rem;

}

.lead{

    font-size:1rem;

}

}


/* ===========================================
   Premium Navbar
=========================================== */

.navbar{

    padding:18px 0;

    transition:.35s;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(14px);

    box-shadow:0 8px 25px rgba(15,23,42,.05);

}

.navbar-brand{

    font-size:1.7rem;

    font-weight:800;

    color:var(--dark)!important;

}

.nav-link{

    color:#475569!important;

    font-weight:600;

    margin-left:12px;

    transition:.3s;

}

.nav-link:hover{

    color:var(--primary)!important;

}

/* ===========================================
   Hero
=========================================== */

.hero{

    position:relative;

    overflow:hidden;

    padding:130px 0;

    background:

    radial-gradient(circle at top left,#2563eb 0%,transparent 35%),

    radial-gradient(circle at bottom right,#7c3aed 0%,transparent 35%),

    linear-gradient(135deg,#0f172a,#111827,#1e293b);

}

.hero::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:rgba(255,255,255,.05);

    border-radius:50%;

    top:-180px;

    right:-150px;

    filter:blur(20px);

}

.hero::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    background:rgba(37,99,235,.20);

    border-radius:50%;

    left:-120px;

    bottom:-120px;

    filter:blur(30px);

}

.hero h1{

    color:#fff;

    font-weight:800;

    line-height:1.1;

}

.hero p{

    color:rgba(255,255,255,.78);

    max-width:760px;

    margin:auto;

}

.hero .btn{

    min-width:190px;

}

/* ===========================================
   Floating Cards
=========================================== */

.feature-card{

    border-radius:24px;

    background:#fff;

    transition:.35s;

    box-shadow:

    0 15px 40px rgba(15,23,42,.08);

}

.feature-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 30px 70px rgba(37,99,235,.16);

}

/* ===========================================
   Dashboard Card
=========================================== */

.dashboard-card{

    border-radius:30px;

    overflow:hidden;

    background:#fff;

    box-shadow:

    0 25px 70px rgba(15,23,42,.12);

}

/* ===========================================
   Stats
=========================================== */

.stat-box{

    background:#fff;

    border-radius:22px;

    padding:28px;

    transition:.35s;

    box-shadow:

    0 10px 35px rgba(0,0,0,.06);

}

.stat-box:hover{

    transform:translateY(-8px);

}

.stat-box h2{

    font-size:2.5rem;

    font-weight:800;

}

/* ===========================================
   CTA
=========================================== */

.cta{

    background:

    linear-gradient(135deg,#2563eb,#4f46e5);

    border-radius:40px;

    color:#fff;

}

/* ===========================================
   Footer
=========================================== */

footer{

    background:#0f172a;

    color:#cbd5e1;

}

footer a{

    color:#cbd5e1;

    text-decoration:none;

}

footer a:hover{

    color:#fff;

}

/* ===========================================
   Mobile
=========================================== */

@media(max-width:991px){

.hero{

    padding:90px 0;

}

.navbar{

    padding:12px 0;

}

.hero h1{

    font-size:2.8rem;

}

}