/* ===========================
   Vikmi Media Website
   =========================== */

:root{
    --primary:#2563eb;
    --primary-dark:#1d4ed8;

    --background:#f8fafc;

    --text:#1e293b;

    --muted:#64748b;

    --white:#ffffff;

    --radius:18px;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins', sans-serif;
    background:var(--bg);
    color:var(--text);
}

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

.navbar{
    padding:16px 0;
}

.navbar-brand{
    font-size:1.2rem;
}

.navbar-brand img{

    border-radius:12px;

}

.nav-link{

    transition:.25s;

}

.nav-link:hover{

    color:var(--primary);

}

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

.hero{
    background:linear-gradient(
        180deg,
        #ffffff,
        #eef5ff
    );

    padding:100px 0;
}

/* Smartphone Mockup */

.phone-mockup{

    max-width:320px;

    margin:auto;

    padding:12px;

    background:#111;

    border-radius:36px;

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

}

.phone-mockup img{

    width:100%;

    display:block;

    border-radius:24px;

}

.hero img{
    border-radius:20px;
}

.hero h1{
    font-weight:700;
}

.hero p{
    color:var(--muted);
    max-width:650px;
    margin:auto;
}

/* ===========================
   Button
   =========================== */

.btn{

    border-radius:999px;

    padding:12px 28px;

}

.btn-primary{
    background:var(--primary);
    border:none;
}

.btn-primary:hover{
    background:var(--primary-dark);
}

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

.card{

    border:none;

    border-radius:20px;

    transition:.3s;

    overflow:hidden;

}

.card:hover{

    transform:translateY(-10px);

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}

.card img{

    aspect-ratio:16/9;

    object-fit:cover;

}

/* ===========================
   Section
   =========================== */

section{
    padding-top:40px;
    padding-bottom:40px;
}

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

footer{
   background:#ffffff;
   border-top:1px solid #eee;
   color:var(--muted);
   font-size:.9rem;
}

/* Mobile */

@media (max-width:768px){

    .hero{
        padding:70px 0;
        text-align:center;
    }

    .phone-mockup{
        margin-top:30px;
    }

}