/*
========================================
DEV CREATORS BLOG
========================================
*/

:root{

--dc-bg:#070C1C;

--dc-card:#0F1633;

--dc-border:rgba(255,255,255,.08);

--dc-text:#ffffff;

--dc-muted:#9FA8C8;

--dc-purple:#6C22FF;

--dc-pink:#B100E8;

--dc-blue:#3F8CFF;

--dc-radius:28px;

--dc-container:1320px;

}

.dc-single-template{

background:var(--dc-bg);

color:var(--dc-text);

}

.dc-container{

width:min(92%,var(--dc-container));

margin:auto;

}

.dc-hero{

position:relative;

overflow:hidden;

padding:120px 0 90px;

margin-bottom:70px;

border-bottom-left-radius:34px;

border-bottom-right-radius:34px;

background:#070C1C;

}

.dc-hero-bg{

position:absolute;

inset:0;

background:

radial-gradient(circle at 20% 20%,rgba(108,34,255,.28),transparent 35%),

radial-gradient(circle at 80% 10%,rgba(177,0,232,.22),transparent 30%),

linear-gradient(#101632,#070C1C);

z-index:0;

}

.dc-hero-grid{

position:absolute;

inset:0;

background-image:

linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

background-size:40px 40px;

opacity:.45;

}

.dc-hero-overlay{

position:absolute;

inset:0;

background:linear-gradient(to bottom,rgba(0,0,0,.15),rgba(0,0,0,.55));

}

.dc-hero-container{

position:relative;

z-index:3;

width:min(92%,980px);

margin:auto;

text-align:center;

}

.dc-breadcrumb{

margin-bottom:28px;

font-size:14px;

color:#A5AFD5;

}

.dc-breadcrumb a{

color:#A5AFD5;

text-decoration:none;

}

.dc-breadcrumb span{

margin:0 8px;

}

.dc-category{

display:inline-flex;

align-items:center;

gap:10px;

padding:8px 18px;

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

border:1px solid rgba(255,255,255,.08);

border-radius:50px;

margin-bottom:28px;

font-size:13px;

text-transform:uppercase;

letter-spacing:.12em;

}

.dc-category-dot{

width:8px;

height:8px;

border-radius:50%;

background:var(--dc-purple);

box-shadow:0 0 14px var(--dc-purple);

}

.dc-hero-title{

font-size:clamp(38px,5vw,64px);

line-height:1.15;

font-weight:700;

margin-bottom:26px;

max-width:900px;

margin-inline:auto;

}

.dc-hero-excerpt{

font-size:19px;

line-height:1.8;

color:var(--dc-muted);

max-width:760px;

margin:auto;

margin-bottom:40px;

}

.dc-post-meta{

display:flex;

justify-content:center;

}

.dc-author{

display:flex;

align-items:center;

gap:16px;

padding:14px 26px;

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

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(18px);

border-radius:60px;

}

.dc-author img{

border-radius:50%;

}

.dc-meta-small{

margin-top:6px;

font-size:14px;

color:var(--dc-muted);

}

.dc-scroll{

margin-top:45px;

display:flex;

justify-content:center;

}

.dc-scroll span{

width:30px;

height:48px;

border:2px solid rgba(255,255,255,.3);

border-radius:30px;

position:relative;

}

.dc-scroll span::before{

content:"";

position:absolute;

width:6px;

height:10px;

background:#ffffff;

left:50%;

transform:translateX(-50%);

top:8px;

border-radius:10px;

animation:dc-scroll 1.8s infinite;

}

@keyframes dc-scroll{

0%{

opacity:0;

top:8px;

}

50%{

opacity:1;

}

100%{

opacity:0;

top:26px;

}

}


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

.dc-main-grid{

display:grid;

grid-template-columns:minmax(0,2fr) minmax(300px,380px);

gap:40px;

align-items:start;

}

.dc-sidebar{

position:relative;

}

.dc-sidebar-inner{

position:sticky;

top:110px;

display:flex;

flex-direction:column;

gap:30px;

}

.dc-card{

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

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(18px);

border-radius:22px;

padding:26px;

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

}

.dc-card h3{

margin:0 0 22px;

font-size:22px;

}

.dc-latest-post{

display:flex;

gap:16px;

margin-bottom:20px;

}

.dc-latest-post:last-child{

margin-bottom:0;

}

.dc-latest-thumb{

width:90px;

flex-shrink:0;

}

.dc-latest-thumb img{

width:100%;

display:block;

border-radius:12px;

}

.dc-latest-content{

display:flex;

flex-direction:column;

gap:8px;

}

.dc-latest-content a{

text-decoration:none;

color:#fff;

font-weight:600;

line-height:1.5;

}

.dc-latest-content span{

font-size:13px;

color:#94A3B8;

}

.dc-category-list{

list-style:none;

padding:0;

margin:0;

}

.dc-category-list li{

display:flex;

justify-content:space-between;

padding:12px 0;

border-bottom:1px solid rgba(255,255,255,.06);

}

.dc-category-list li:last-child{

border-bottom:none;

}

.dc-category-list a{

color:#fff;

text-decoration:none;

}

.dc-category-list span{

color:#B100E8;

font-weight:600;

}

.dc-cta-card{

background:linear-gradient(145deg,#30205f,#1b133b);

}

.dc-btn{

display:inline-flex;

justify-content:center;

align-items:center;

padding:14px 26px;

margin-top:18px;

background:linear-gradient(90deg,#6C22FF,#B100E8);

border-radius:12px;

color:#fff;

font-weight:600;

text-decoration:none;

transition:.3s;

}

.dc-btn:hover{

transform:translateY(-3px);

box-shadow:0 15px 35px rgba(108,34,255,.4);

}

.dc-social{

display:flex;

gap:12px;

}

.dc-social a{

width:46px;

height:46px;

display:flex;

justify-content:center;

align-items:center;

border-radius:12px;

background:#111935;

text-decoration:none;

color:#fff;

transition:.3s;

}

.dc-social a:hover{

background:#6C22FF;

transform:translateY(-4px);

}

#dc-toc ul{

list-style:none;

margin:0;

padding:0;

}

#dc-toc li{

margin:12px 0;

}

#dc-toc a{

color:#cfd7ff;

text-decoration:none;

transition:.3s;

}

#dc-toc a.active{

color:#B100E8;

font-weight:700;

}


/*
==========================================
READING PROGRESS
==========================================
*/

#dc-reading-progress{

position:fixed;

top:0;

left:0;

height:4px;

width:0;

z-index:99999;

background:linear-gradient(

90deg,

#3F2BCB,

#6C22FF,

#891BFF,

#B100E8

);

box-shadow:

0 0 20px #6C22FF;

}


/*
==========================================
TOC
==========================================
*/

.dc-sub-heading{

padding-left:18px;

font-size:.92rem;

opacity:.9;

}

#dc-toc a{

display:block;

padding:8px 0;

transition:.3s;

}

#dc-toc a:hover{

color:#fff;

transform:translateX(4px);

}

#dc-toc a.active{

color:#B100E8;

font-weight:700;

}


/*
==========================================
ANIMATION
==========================================
*/

.dc-card{

opacity:0;

transform:translateY(40px);

transition:
opacity .8s ease,
transform .8s ease;

}

.dc-article{

opacity:1;

transform:none;

}

.dc-visible{

opacity:1;

transform:translateY(0);

}


/*==================================================
ARTICLE
==================================================*/

.dc-article{

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

border:1px solid rgba(255,255,255,.08);

border-radius:26px;

padding:40px;

backdrop-filter:blur(18px);

overflow:hidden;

}

.dc-entry-content{

color:#d7dcef;

font-size:18px;

line-height:1.9;

}

.dc-entry-content>*:first-child{

margin-top:0;

}


/*========================================
FEATURED IMAGE
========================================*/


.dc-featured-image{

margin:0 0 50px;

overflow:hidden;

border-radius:24px;

}

.dc-featured-img{

width:100%;

display:block;

border-radius:24px;

box-shadow:
0 20px 60px rgba(0,0,0,.45);

transition:.5s;

}

.dc-featured-img:hover{

transform:scale(1.02);

}

/* Images inside Elementor */

.dc-entry-content img{

max-width:100%;

height:auto;

border-radius:18px;

}


/*========================================
PARAGRAPH
========================================*/

.dc-entry-content p{

margin:0 0 26px;

color:#BFC8E8;

}


/*========================================
HEADINGS
========================================*/

.dc-entry-content h2{

position:relative;

font-size:38px;

font-weight:700;

margin:70px 0 28px;

padding-left:22px;

color:#fff;

}

.dc-entry-content h2::before{

content:"";

position:absolute;

left:0;

top:8px;

width:5px;

height:42px;

border-radius:10px;

background:linear-gradient(

180deg,

#6C22FF,

#B100E8

);

}

.dc-entry-content h3{

font-size:28px;

margin:50px 0 18px;

color:#ffffff;

}


/*========================================
LISTS
========================================*/

.dc-entry-content ul{

padding-left:22px;

margin:30px 0;

}

.dc-entry-content li{

margin:14px 0;

color:#CBD5F5;

}


/*========================================
LINKS
========================================*/

.dc-entry-content a{

color:#8E6CFF;

text-decoration:none;

transition:.3s;

}

.dc-entry-content a:hover{

color:#ffffff;

}


/*========================================
BLOCKQUOTE
========================================*/

.dc-entry-content blockquote{

margin:45px 0;

padding:35px;

background:linear-gradient(

145deg,

rgba(108,34,255,.18),

rgba(177,0,232,.08)

);

border-left:5px solid #B100E8;

border-radius:18px;

font-size:22px;

font-style:italic;

color:#fff;

}


/*========================================
CODE
========================================*/

.dc-entry-content pre{

padding:24px;

overflow:auto;

background:#0B1025;

border-radius:18px;

border:1px solid rgba(255,255,255,.06);

margin:35px 0;

}

.dc-entry-content code{

font-family:Consolas,monospace;

}


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

.dc-entry-content table{

width:100%;

border-collapse:collapse;

margin:40px 0;

overflow:hidden;

border-radius:18px;

}

.dc-entry-content th{

background:#171F45;

padding:16px;

text-align:left;

}

.dc-entry-content td{

padding:16px;

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

}


/*========================================
HR
========================================*/

.dc-entry-content hr{

margin:60px 0;

border:none;

height:1px;

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

}


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

.dc-entry-content .wp-block-button__link{

background:linear-gradient(

90deg,

#6C22FF,

#B100E8

);

padding:16px 28px;

border-radius:14px;

}


/*========================================
ELEMENTOR IMAGE
========================================*/

.elementor-widget-image img{

border-radius:22px;

}


/*========================================
ELEMENTOR VIDEO
========================================*/

.elementor-widget-video iframe{

border-radius:22px;

overflow:hidden;

}


/*========================================
SPACING
========================================*/

.dc-entry-content>*{

max-width:100%;

}


.dev-heading{
    background: linear-gradient(
    90deg,
    #6A2CFF 10%,
    #8A1FFF 25%,
    #C11BFF 60%,
    #F03DCC 100%
) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;

    display: inline-block !important;
}

/*==================================================
TABLET
==================================================*/

@media (max-width: 1024px){

    .dc-main-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .dc-sidebar{

        width:100%;

        order:2;

    }

    .dc-content{

        width:100%;

        order:1;

        min-width:0;

    }

    .dc-sidebar-inner{

        position:relative;

        top:0;

    }

}


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

@media (max-width:768px){

    .dc-container{

        width:92%;
        padding-bottom: 20px;

    }
    
    .dc-featured-image{
        margin: 0 0 20px;
    }

    .dc-main-grid{

        display:block;

    }

    .dc-content{

        width:100%;

        max-width:100%;

    }

    .dc-sidebar{

        width:100%;

        margin-top:0px;

    }

    .dc-sidebar-inner{

        position:relative;

        top:0;

        display:flex;

        flex-direction:column;

        gap:24px;

    }

    .dc-article{

        padding:24px;

    }
    
    .dc-entry-content table{

    display:block;

    overflow-x:auto;
    }
    
    .dc-toc-card{
        display: none;
    }
    
    .dc-hero{
        padding-bottom: 25px;
        margin-bottom: 20px;
    }
    
    .site .site-content #primary .ast-article-single{
            padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    }
    
    .dc-entry-content h2{
    padding-top: 10px;
    font-size: 20px;
    margin: 20px 0 20px;
    }

}