/* ==========================================================
   Political Party Website
   File : assets/css/style.css
   ========================================================== */

/* ==========================================================
   RESET
   ========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Arial,
    sans-serif;

    font-size:16px;

    line-height:1.6;

    background:#f5f7fb;

    color:#222;

    overflow-x:hidden;
}

img{

    max-width:100%;

    display:block;
}

a{

    color:inherit;

    text-decoration:none;
}

ul{

    list-style:none;
}

button{

    cursor:pointer;

    border:none;

    background:none;

    font:inherit;
}

input,
textarea,
select{

    font:inherit;

    outline:none;
}

.no-scroll{

    overflow:hidden;
}

/* ==========================================================
   CONTAINER
   ========================================================== */

.container{

    width:100%;

    max-width:1320px;

    margin:auto;

    padding-left:20px;

    padding-right:20px;
}

/* ==========================================================
   HEADER
   ========================================================== */

.site-header{

    background:#ffffff;

    position:sticky;

    top:0;

    left:0;

    z-index:999;

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

.site-header .container{

    height:72px;

    display:flex;

    justify-content:space-between;

    align-items:center;
}

.logo{

    display:flex;

    align-items:center;

    gap:12px;
}

.logo img{

    width:48px;

    height:48px;

    object-fit:contain;
}

.logo span{

    font-size:22px;

    font-weight:700;

    color:#0b4ea2;
}

/* ==========================================================
   MENU BUTTON
   ========================================================== */

.menu-button{

    width:48px;

    height:48px;

    border-radius:10px;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.3s;
}

.menu-button:hover{

    background:#edf2ff;
}

.menu-button img{

    width:24px;

    height:24px;
}

/* ==========================================================
   MOBILE MENU
   ========================================================== */

.main-navigation{

    position:fixed;

    top:0;

    right:-320px;

    width:300px;

    height:100vh;

    background:#ffffff;

    z-index:2000;

    transition:.35s ease;

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

    overflow-y:auto;
}

.menu-open{

    right:0;
}

/* ==========================================================
   OVERLAY
   ========================================================== */

.menu-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:1500;
}

.overlay-show{

    opacity:1;

    visibility:visible;
}

/* ==========================================================
   NAV HEADER
   ========================================================== */

.nav-header{

    height:72px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 20px;

    border-bottom:1px solid #ececec;
}

.nav-header h2{

    font-size:20px;

    color:#0b4ea2;
}

.close-menu{

    width:40px;

    height:40px;

    border-radius:8px;

    display:flex;

    align-items:center;

    justify-content:center;
}

.close-menu:hover{

    background:#edf2ff;
}

.close-menu img{

    width:22px;

    height:22px;
}

/* ==========================================================
   NAVIGATION
   ========================================================== */

.nav-menu{

    padding:15px;
}

.nav-menu li{

    margin-bottom:8px;
}

.nav-menu a{

    display:block;

    padding:14px 18px;

    border-radius:10px;

    transition:.25s;

    font-weight:500;
}

.nav-menu a:hover{

    background:#edf2ff;

    color:#0b4ea2;
}

.nav-menu a.active{

    background:#0b4ea2;

    color:#ffffff;
}

/* ==========================================================
   NAV FOOTER
   ========================================================== */

.nav-footer{

    padding:20px;

    border-top:1px solid #ececec;

    text-align:center;

    color:#777;

    font-size:14px;
}


/* ==========================================================
   MAIN CONTENT
   ========================================================== */

.main-content{

    min-height:calc(100vh - 72px);

    padding:30px 0 50px;
}

/* ==========================================================
   PAGE TITLE
   ========================================================== */

.page-title{

    margin-bottom:30px;
}

.page-title h1{

    font-size:32px;

    font-weight:700;

    color:#0b4ea2;

    margin-bottom:8px;
}

.page-title p{

    color:#666;

    font-size:15px;
}

/* ==========================================================
   SEARCH
   ========================================================== */

.search-section{

    margin-bottom:35px;
}

.search-box{

    width:100%;

    background:#ffffff;

    border:1px solid #d9e2ef;

    border-radius:14px;

    display:flex;

    align-items:center;

    overflow:hidden;

    box-shadow:0 2px 8px rgba(0,0,0,.04);
}

.search-box input{

    flex:1;

    border:none;

    padding:16px 20px;

    background:none;

    font-size:16px;
}

.search-box button{

    width:60px;

    height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#0b4ea2;
}

.search-box button:hover{

    background:#083b7b;
}

.search-box img{

    width:22px;

    height:22px;
}

/* ==========================================================
   GRID
   ========================================================== */

.grid{

    display:grid;

    gap:25px;
}

.grid-2{

    grid-template-columns:repeat(2,1fr);
}

.grid-3{

    grid-template-columns:repeat(3,1fr);
}

.grid-4{

    grid-template-columns:repeat(4,1fr);
}

/* ==========================================================
   CARD
   ========================================================== */

.card{

    background:#ffffff;

    border-radius:16px;

    overflow:hidden;

    border:1px solid #e7edf5;

    transition:.30s;

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

.card:hover{

    transform:translateY(-4px);

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

.card-image{

    width:100%;

    height:220px;

    overflow:hidden;
}

.card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.35s;
}

.card:hover .card-image img{

    transform:scale(1.05);
}

.card-body{

    padding:20px;
}

.card-category{

    display:inline-block;

    padding:5px 12px;

    border-radius:20px;

    background:#edf2ff;

    color:#0b4ea2;

    font-size:13px;

    font-weight:600;

    margin-bottom:14px;
}

.card-title{

    font-size:20px;

    font-weight:700;

    margin-bottom:10px;

    line-height:1.4;
}

.card-description{

    color:#666;

    margin-bottom:18px;

    line-height:1.7;
}

.card-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-top:15px;

    border-top:1px solid #ececec;
}

.card-date{

    color:#888;

    font-size:14px;
}

.card-link{

    color:#0b4ea2;

    font-weight:600;
}

/* ==========================================================
   BUTTONS
   ========================================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:13px 24px;

    border-radius:10px;

    transition:.25s;

    font-weight:600;
}

.btn-primary{

    background:#0b4ea2;

    color:#ffffff;
}

.btn-primary:hover{

    background:#083b7b;
}

.btn-secondary{

    background:#eceff6;

    color:#333;
}

.btn-secondary:hover{

    background:#dfe5ef;
}

.btn-danger{

    background:#d62828;

    color:#ffffff;
}

.btn-danger:hover{

    background:#b91c1c;
}

/* ==========================================================
   SECTION
   ========================================================== */

.section{

    margin-bottom:45px;
}

.section-title{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;
}

.section-title h2{

    font-size:28px;

    color:#0b4ea2;
}

/* ==========================================================
   ALERT
   ========================================================== */

.alert{

    padding:16px 20px;

    border-radius:12px;

    margin-bottom:20px;

    transition:.3s;
}

.alert-success{

    background:#dff7e5;

    color:#0b6b2d;
}

.alert-danger{

    background:#ffe4e4;

    color:#b00020;
}

.alert-warning{

    background:#fff5d8;

    color:#946200;
}

.alert-info{

    background:#e7f2ff;

    color:#004b9b;
}


/* ==========================================================
   FORMS
   ========================================================== */

.form-group{

    margin-bottom:22px;
}

.form-label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    color:#333;
}

.form-control{

    width:100%;

    padding:14px 16px;

    border:1px solid #d9e2ef;

    border-radius:10px;

    background:#ffffff;

    transition:.25s;
}

.form-control:focus{

    border-color:#0b4ea2;

    box-shadow:0 0 0 3px rgba(11,78,162,.12);
}

textarea.form-control{

    resize:vertical;

    min-height:140px;
}

select.form-control{

    cursor:pointer;
}

/* ==========================================================
   CHECKBOX & RADIO
   ========================================================== */

.form-check{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:12px;
}

.form-check input{

    width:18px;

    height:18px;
}

/* ==========================================================
   TABLE
   ========================================================== */

.table-responsive{

    overflow-x:auto;
}

.table{

    width:100%;

    border-collapse:collapse;

    background:#ffffff;

    border-radius:12px;

    overflow:hidden;
}

.table thead{

    background:#0b4ea2;

    color:#ffffff;
}

.table th{

    padding:15px;

    text-align:left;

    font-weight:600;
}

.table td{

    padding:15px;

    border-bottom:1px solid #ececec;
}

.table tbody tr:hover{

    background:#f7f9fc;
}

/* ==========================================================
   PAGINATION
   ========================================================== */

.pagination{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:35px;

    flex-wrap:wrap;
}

.pagination a{

    min-width:42px;

    height:42px;

    padding:0 15px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:8px;

    background:#ffffff;

    border:1px solid #d9e2ef;

    transition:.25s;
}

.pagination a:hover{

    background:#edf2ff;

    color:#0b4ea2;
}

.pagination .active{

    background:#0b4ea2;

    color:#ffffff;

    border-color:#0b4ea2;
}

/* ==========================================================
   BREADCRUMB
   ========================================================== */

.breadcrumb{

    display:flex;

    gap:8px;

    align-items:center;

    margin-bottom:25px;

    font-size:14px;

    color:#666;
}

.breadcrumb a{

    color:#0b4ea2;
}

/* ==========================================================
   SIDEBAR
   ========================================================== */

.sidebar{

    background:#ffffff;

    border-radius:14px;

    padding:22px;

    border:1px solid #e5e7eb;
}

.sidebar-widget{

    margin-bottom:35px;
}

.sidebar-widget:last-child{

    margin-bottom:0;
}

.sidebar-title{

    font-size:20px;

    color:#0b4ea2;

    margin-bottom:18px;
}

/* ==========================================================
   CATEGORY LIST
   ========================================================== */

.category-list li{

    border-bottom:1px solid #ececec;
}

.category-list li:last-child{

    border-bottom:none;
}

.category-list a{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 0;

    transition:.25s;
}

.category-list a:hover{

    color:#0b4ea2;
}

/* ==========================================================
   TAGS
   ========================================================== */

.tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;
}

.tag{

    padding:8px 14px;

    border-radius:20px;

    background:#edf2ff;

    color:#0b4ea2;

    font-size:14px;

    transition:.25s;
}

.tag:hover{

    background:#0b4ea2;

    color:#ffffff;
}

/* ==========================================================
   NEWS TICKER
   ========================================================== */

.news-ticker{

    background:#0b4ea2;

    color:#ffffff;

    padding:12px 20px;

    border-radius:10px;

    overflow:hidden;

    white-space:nowrap;
}

.news-ticker span{

    display:inline-block;

    padding-left:100%;

    animation:ticker 25s linear infinite;
}

@keyframes ticker{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-100%);

    }

}

/* ==========================================================
   LOADER
   ========================================================== */

.loader{

    width:50px;

    height:50px;

    border:5px solid #e5e7eb;

    border-top-color:#0b4ea2;

    border-radius:50%;

    animation:spin 1s linear infinite;

    margin:auto;
}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/* ==========================================================
   UTILITIES
   ========================================================== */

.text-center{

    text-align:center;
}

.text-right{

    text-align:right;
}

.mt-10{margin-top:10px;}
.mt-20{margin-top:20px;}
.mt-30{margin-top:30px;}
.mt-40{margin-top:40px;}
.mt-50{margin-top:50px;}

.mb-10{margin-bottom:10px;}
.mb-20{margin-bottom:20px;}
.mb-30{margin-bottom:30px;}
.mb-40{margin-bottom:40px;}
.mb-50{margin-bottom:50px;}

.p-10{padding:10px;}
.p-20{padding:20px;}
.p-30{padding:30px;}

.hidden{

    display:none;
}

.shadow{

    box-shadow:0 8px 24px rgba(0,0,0,.08);
}

.rounded{

    border-radius:12px;
}


/* ==========================================================
   FOOTER
   ========================================================== */

.site-footer{

    margin-top:60px;

    background:#0b4ea2;

    color:#ffffff;
}

.footer-top{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:40px;

    padding:60px 0;
}

.footer-column h3{

    font-size:28px;

    margin-bottom:20px;
}

.footer-column h4{

    font-size:20px;

    margin-bottom:18px;
}

.footer-column p{

    margin-bottom:12px;

    line-height:1.8;

    opacity:.9;
}

.footer-column ul li{

    margin-bottom:12px;
}

.footer-column a{

    color:#ffffff;

    transition:.25s;
}

.footer-column a:hover{

    opacity:.75;
}

.footer-bottom{

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

    text-align:center;

    padding:20px 0;

    font-size:14px;
}

/* ==========================================================
   NEWS DETAIL
   ========================================================== */

.article-wrapper{

    max-width:900px;

    margin:auto;
}

.article-header{

    margin-bottom:30px;
}

.article-header h1{

    font-size:42px;

    line-height:1.35;

    margin-bottom:18px;

    color:#0b4ea2;
}

.article-meta{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    color:#666;

    margin-bottom:25px;
}

.article-featured{

    border-radius:18px;

    overflow:hidden;

    margin-bottom:35px;
}

.article-content{

    font-size:18px;

    line-height:2;
}

.article-content p{

    margin-bottom:22px;
}

.article-content h2,
.article-content h3{

    margin:35px 0 15px;
}

/* ==========================================================
   HOME CARD GRID
   ========================================================== */

.home-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));

    gap:25px;
}

.home-card{

    background:#ffffff;

    border:1px solid #e6ebf2;

    border-radius:18px;

    padding:24px;

    transition:.30s;

    box-shadow:0 4px 12px rgba(0,0,0,.05);
}

.home-card:hover{

    transform:translateY(-5px);

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

.home-card img{

    width:52px;

    height:52px;

    margin-bottom:18px;
}

.home-card h3{

    font-size:22px;

    color:#0b4ea2;

    margin-bottom:12px;
}

.home-card p{

    color:#666;

    line-height:1.8;
}

/* ==========================================================
   SEARCH RESULTS
   ========================================================== */

.search-result{

    background:#ffffff;

    border:1px solid #e6ebf2;

    border-radius:14px;

    padding:20px;

    margin-bottom:18px;
}

.search-result h3{

    margin-bottom:10px;

    color:#0b4ea2;
}

.search-result p{

    color:#666;
}

/* ==========================================================
   BACK TO TOP
   ========================================================== */

#backToTop{

    position:fixed;

    right:25px;

    bottom:25px;

    width:50px;

    height:50px;

    border-radius:50%;

    background:#0b4ea2;

    color:#ffffff;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:.30s;

    z-index:999;
}

#backToTop.show{

    opacity:1;

    visibility:visible;
}

#backToTop:hover{

    background:#083b7b;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width:1200px){

    .footer-top{

        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width:992px){

    .grid-4{

        grid-template-columns:repeat(2,1fr);
    }

    .grid-3{

        grid-template-columns:repeat(2,1fr);
    }

    .article-header h1{

        font-size:34px;
    }

}

@media (max-width:768px){

    .container{

        padding-left:16px;

        padding-right:16px;
    }

    .grid-2,
    .grid-3,
    .grid-4{

        grid-template-columns:1fr;
    }

    .footer-top{

        grid-template-columns:1fr;
    }

    .site-header .container{

        height:65px;
    }

    .logo span{

        font-size:18px;
    }

    .page-title h1{

        font-size:28px;
    }

    .article-header h1{

        font-size:30px;
    }

    .search-box input{

        padding:14px;
    }

}

@media (max-width:480px){

    body{

        font-size:15px;
    }

    .home-card{

        padding:18px;
    }

    .card-body{

        padding:18px;
    }

    .article-content{

        font-size:16px;
    }

}

/* ==========================================================
   SELECTION
   ========================================================== */

::selection{

    background:#0b4ea2;

    color:#ffffff;
}

/* ==========================================================
   SCROLLBAR
   ========================================================== */

::-webkit-scrollbar{

    width:10px;
}

::-webkit-scrollbar-track{

    background:#eef2f7;
}

::-webkit-scrollbar-thumb{

    background:#0b4ea2;

    border-radius:10px;
}

::-webkit-scrollbar-thumb:hover{

    background:#083b7b;
}