:root{
    --seo-bg:#07111f;
    --seo-bg2:#0b1728;
    --seo-card:#0f1d30;
    --seo-card2:#122238;
    --seo-border:rgba(255,255,255,.08);
    --seo-text:#f4f7fb;
    --seo-muted:#91a0b5;
    --seo-green:#24d67d;
    --seo-green-dark:#16b967;
}

html,body{
    background:var(--seo-bg);
    color:var(--seo-text);
    font-family:Roboto,Arial,sans-serif;
}

body{
    margin:0;
}

a{
    transition:.2s ease;
}

a:hover{
    text-decoration:none;
}

/* HEADER */
header{
    background:rgba(7,17,31,.96);
    border-bottom:1px solid var(--seo-border);
    box-shadow:0 10px 30px rgba(0,0,0,.18);
}

header .container-fluid{
    max-width:1180px;
    min-height:76px;
    display:flex;
    align-items:center;
    margin:auto;
    padding-left:20px;
    padding-right:20px;
}

.seo-blog-brand{
    display:flex;
    align-items:center;
    font-size:25px;
    font-weight:800;
    letter-spacing:-1px;
    color:#fff!important;
}

.seo-blog-brand span{
    color:var(--seo-green);
}

header .main-menu{
    margin-left:45px;
}

header .main-menu > li > a{
    color:#c7d0dc;
    font-size:13px;
    font-weight:600;
}

header .main-menu > li > a:hover{
    color:var(--seo-green);
}

.src-area{
    margin-left:auto;
}

.src-area form{
    background:var(--seo-card);
    border:1px solid var(--seo-border);
    border-radius:10px;
    overflow:hidden;
}

.src-area .src-input{
    background:transparent;
    color:#fff;
}

.src-area .src-input::placeholder{
    color:#718096;
}

.src-area .src-btn{
    color:var(--seo-green);
}

/* HERO */
.slider{
    height:auto!important;
    min-height:280px;
    background:
        radial-gradient(circle at 80% 20%,rgba(36,214,125,.16),transparent 30%),
        linear-gradient(135deg,#07111f,#0b1b2e);
    border-bottom:1px solid var(--seo-border);
}

.seo-blog-hero{
    max-width:1180px;
    margin:auto;
    padding:72px 20px 68px;
}

.seo-blog-hero small{
    display:inline-block;
    color:var(--seo-green);
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:12px;
}

.seo-blog-hero h1{
    color:#fff;
    font-size:42px;
    font-weight:800;
    margin:0 0 14px;
}

.seo-blog-hero p{
    color:var(--seo-muted);
    max-width:650px;
    font-size:16px;
    line-height:1.8;
    margin:0;
}

/* BLOG */
.blog-area{
    background:var(--seo-bg);
    padding-top:55px;
    padding-bottom:70px;
}

.blog-area .card{
    background:var(--seo-card);
    border:1px solid var(--seo-border);
    border-radius:16px;
    overflow:hidden;
    margin-bottom:25px;
    box-shadow:0 14px 35px rgba(0,0,0,.15);
}

.blog-area .card:hover{
    border-color:rgba(36,214,125,.30);
    transform:translateY(-2px);
}

.blog-image{
    display:block;
    overflow:hidden;
}

.blog-image img{
    width:100%;
    max-height:370px;
    object-fit:cover;
    transition:transform .35s ease;
}

.card:hover .blog-image img{
    transform:scale(1.025);
}

.blog-info{
    background:transparent!important;
    padding:28px!important;
}

.blog-info .title a,
.blog-info .title b{
    color:#fff!important;
}

.blog-info .title a:hover,
.blog-info .title a:hover b{
    color:var(--seo-green)!important;
}

.blog-info p{
    color:var(--seo-muted)!important;
    line-height:1.8;
}

.avatar-area .date{
    color:#77869a!important;
}

.post-footer{
    border-top:1px solid var(--seo-border)!important;
}

.post-footer a{
    color:var(--seo-muted)!important;
}

.post-footer i{
    color:var(--seo-green);
}

/* SIDEBAR */
.info-area{
    background:var(--seo-card)!important;
    border:1px solid var(--seo-border);
    border-radius:16px;
    padding:25px!important;
}

.info-area .title{
    color:#fff;
    font-size:17px;
}

.tag-area ul{
    margin-top:20px;
}

.tag-area li{
    display:block!important;
    margin:0 0 9px!important;
}

.tag-area li a{
    display:block;
    padding:11px 14px;
    background:var(--seo-card2);
    border:1px solid var(--seo-border);
    border-radius:9px;
    color:#cbd5e1!important;
}

.tag-area li a:hover{
    border-color:var(--seo-green);
    color:var(--seo-green)!important;
}

/* PAGINATION */
.load-more-btn{
    background:var(--seo-green)!important;
    color:#04120b!important;
    border:0!important;
    border-radius:9px!important;
    padding:13px 22px!important;
    margin-right:8px;
    font-weight:700;
}

.load-more-btn:hover{
    background:var(--seo-green-dark)!important;
}

/* FOOTER */
footer{
    background:#050c16!important;
    border-top:1px solid var(--seo-border);
}

footer .footer-section{
    padding:40px 0!important;
    text-align:center;
}

.seo-footer-brand{
    display:inline-block;
    color:#fff!important;
    font-size:24px;
    font-weight:800;
    letter-spacing:-1px;
    margin-bottom:12px;
}

.seo-footer-brand span{
    color:var(--seo-green);
}

footer .copyright{
    color:var(--seo-muted)!important;
}

/* MOBILE */
@media(max-width:767px){
    header .container-fluid{
        min-height:68px;
    }

    .seo-blog-brand{
        font-size:22px;
    }

    .seo-blog-hero{
        padding:50px 20px;
    }

    .seo-blog-hero h1{
        font-size:32px;
    }

    .blog-area{
        padding-top:35px;
    }

    .blog-info{
        padding:20px!important;
    }

    .src-area{
        width:100%;
    }
}