/*
==================================================
NeedsWorld
Professional White & Blue Theme
==================================================
*/

:root{

    --primary:#0d6efd;
    --primary-dark:#0b5ed7;
    --secondary:#6c757d;
    --success:#198754;
    --danger:#dc3545;
    --warning:#ffc107;
    --light:#f8f9fa;
    --white:#ffffff;
    --dark:#212529;
    --border:#dee2e6;
    --shadow:0 10px 30px rgba(0,0,0,.08);
    --radius:12px;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:#f5f7fb;
    color:#333;
    font-size:15px;
    font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;
    line-height:1.7;

}

img{

    max-width:100%;
    display:block;

}

a{

    text-decoration:none;
    transition:.3s;

}

ul{

    list-style:none;
    margin:0;
    padding:0;

}

section{

    margin-bottom:35px;

}

/*
==================================================
Header
==================================================
*/

header{

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

}

.navbar{

    box-shadow:0 3px 10px rgba(0,0,0,.08);

}

.navbar-brand{

    font-weight:700;

}

.nav-link{

    color:#fff !important;
    padding:10px 16px !important;
    border-radius:8px;

}

.nav-link:hover,
.nav-link.active{

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

}

/*
==================================================
Search
==================================================
*/

.input-group .form-control{

    border-radius:10px 0 0 10px;

}

.input-group .btn{

    border-radius:0 10px 10px 0;

}

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

.section-title{

    font-size:28px;
    font-weight:700;
    margin-bottom:20px;
    color:var(--dark);

}

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

.card{

    border:none;
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:.3s;

}

.card:hover{

    transform:translateY(-6px);

}

.card img{

    width:100%;

    height:auto;

    max-height:320px;

    object-fit:contain;

    background:#fff;

}
@media (max-width:576px){

    .card img{

        object-fit:contain;

        background:#f5f5f5;

    }

}

.card-body{

    padding:18px;

}

.card-title{

    font-size:14px;
    font-weight:600;
    line-height:1.4;
    margin-bottom:8px;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    overflow:hidden;

}

.card-text{

    color:#666;
    font-size:14px;

}

/*
==================================================
Article
==================================================
*/

.article-box{

    background:#fff;
    border-radius:var(--radius);
    padding:25px;
    box-shadow:var(--shadow);

}

.article-title{

    font-size:34px;
    font-weight:700;
    margin-bottom:20px;

}

.article-meta{

    color:#777;
    margin-bottom:20px;
    font-size:14px;

}

.article-content{

    line-height:1.9;

}

.article-content img{

    margin:25px auto;
    border-radius:10px;

}

.article-content iframe{

    width:100%;
    height:450px;
    border:none;
    border-radius:10px;

}

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

.badge-category{

    background:var(--primary);
    color:#fff;
    padding:8px 15px;
    border-radius:30px;
    font-size:13px;

}

/*
==================================================
Sidebar
==================================================
*/

.sidebar{

    background:#fff;
    border-radius:var(--radius);
    padding:20px;
    box-shadow:var(--shadow);

}

.sidebar h4{

    margin-bottom:20px;
    font-weight:700;

}

.sidebar li{

    margin-bottom:12px;

}

.sidebar a{

    color:#333;

}

.sidebar a:hover{

    color:var(--primary);

}

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

.btn{

    border-radius:10px;

}

.btn-primary{

    background:var(--primary);
    border:none;

}

.btn-primary:hover{

    background:var(--primary-dark);

}

/*
==================================================
Pagination
==================================================
*/

.pagination .page-link{

    border:none;
    margin:3px;
    border-radius:8px;

}

.pagination .active .page-link{

    background:var(--primary);

}

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

footer{

    margin-top:60px;

}

footer h4,
footer h5{

    font-weight:700;

}

footer a{

    color:#ddd;

}

footer a:hover{

    color:#fff;

}

/*
==================================================
Back To Top
==================================================
*/

#backToTop{

    transition:.3s;

}

#backToTop:hover{

    transform:translateY(-5px);

}

/*
==================================================
Utilities
==================================================
*/

.shadow-box{

    background:#fff;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:20px;

}

.rounded-xl{

    border-radius:var(--radius);

}

.text-primary{

    color:var(--primary)!important;

}

.bg-primary{

    background:var(--primary)!important;

}

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

@media(max-width:991px){

    .article-title{

        font-size:28px;

    }

    .article-content iframe{

        height:350px;

    }

}

@media(max-width:768px){

    body{

        font-size:14px;

    }

    .section-title{

        font-size:24px;

    }

    .card img{

        height:200px;

    }

    .article-box{

        padding:18px;

    }

    .article-title{

        font-size:24px;

    }

    .article-content iframe{

        height:260px;

    }

}

@media(max-width:576px){

    .card img{

        height:180px;

    }

    .article-title{

        font-size:22px;

    }

    .navbar-brand{

        font-size:20px;

    }

}