/* ===================================================
   QQGROUP URL SHORTENER
=================================================== */

body{
    background:#f5f7fb;
    font-family:Segoe UI,Tahoma,sans-serif;
    color:#333;
}

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

.navbar{
    box-shadow:0 2px 12px rgba(0,0,0,.08);
}

.navbar-brand{
    font-weight:700;
    letter-spacing:.5px;
}

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

.hero{
    background:linear-gradient(135deg,#0d6efd,#4f8ef7);
    color:#fff;
    padding:90px 0;
}

.hero h1{
    font-weight:800;
    font-size:52px;
}

.hero p{
    opacity:.95;
}

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

.card{
    border:none;
    border-radius:18px;
    overflow:hidden;
    transition:.25s;
}

.card:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 35px rgba(0,0,0,.08);
}

.card-header{
    font-weight:600;
}

/* ==========================================
Form
========================================== */

.form-control,
.input-group-text{

    border-radius:10px;
    min-height:48px;

}

.form-control:focus{

    box-shadow:none;

    border-color:#0d6efd;

}

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

.btn{

    border-radius:10px;

    transition:.25s;

}

.btn-primary{

    background:#0d6efd;

    border:none;

}

.btn-primary:hover{

    transform:translateY(-2px);

}

.btn-success:hover{

    transform:translateY(-2px);

}

.btn-warning:hover{

    transform:translateY(-2px);

}

/* ==========================================
Result Box
========================================== */

#short{

    font-weight:600;

    color:#0d6efd;

}

/* ==========================================
Table
========================================== */

.table{

    background:#fff;

}

.table thead{

    background:#0d6efd;

    color:#fff;

}

.table th{

    border:none;

}

.table td{

    vertical-align:middle;

}

/* ==========================================
Feature Box
========================================== */

.feature{

    background:#fff;

    border-radius:15px;

    padding:30px;

    text-align:center;

    transition:.3s;

    box-shadow:0 5px 15px rgba(0,0,0,.05);

}

.feature:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 30px rgba(0,0,0,.10);

}

.feature i{

    font-size:48px;

}

.feature h3{

    margin-top:20px;

    font-size:22px;

    font-weight:700;

}

/* ==========================================
Statistics
========================================== */

.stat{

    background:#fff;

    border-radius:16px;

    padding:35px;

    text-align:center;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.stat h1{

    font-size:46px;

    font-weight:700;

}

/* ==========================================
QR Code
========================================== */

img{

    max-width:100%;

}

.qr-box{

    background:#fff;

    padding:20px;

    border-radius:15px;

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

}

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

.footer{

    background:#111827;

    color:#fff;

    padding:50px 0;

    margin-top:80px;

}

.footer a{

    color:#fff;

    text-decoration:none;

}

.footer a:hover{

    color:#0d6efd;

}

.footer p{

    color:#cbd5e1;

}

/* ==========================================
Badge
========================================== */

.badge{

    font-size:13px;

    padding:8px 12px;

}

/* ==========================================
Alert
========================================== */

.alert{

    border-radius:12px;

}

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

@media(max-width:768px){

.hero{

padding:60px 0;

}

.hero h1{

font-size:34px;

}

.display-4{

font-size:34px;

}

.card-body{

padding:20px;

}

.stat{

padding:20px;

}

.stat h1{

font-size:34px;

}

}