/* =====================================================
   NEXORA DIGITAL - DEMO SHOWCASE CSS
===================================================== */


/* Section */

.demo-showcase-section{

    padding:80px 0;

    background:#ffffff;

}





/* Heading */


.demo-heading{

    text-align:center;

    max-width:750px;

    margin:0 auto 45px;

}



.demo-heading span{


    display:inline-block;


    padding:8px 20px;


    border-radius:30px;


    background:#eff6ff;


    color:#2563eb;


    font-size:14px;


    font-weight:700;


}



.demo-heading h2{


    font-size:40px;


    font-weight:900;


    margin:15px 0;


    background:linear-gradient(

    90deg,

    #2563eb,

    #7c3aed,

    #ec4899,

    #f97316

    );


    background-size:300%;


    -webkit-background-clip:text;


    -webkit-text-fill-color:transparent;


    animation:demoTitleMove 6s infinite;


}




@keyframes demoTitleMove{


0%{

background-position:0%;

}


50%{

background-position:100%;

}


100%{

background-position:0%;

}


}




.demo-heading p{


color:#64748b;


font-size:17px;


}







/* Grid */


.demo-showcase-grid{


display:grid;


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


gap:25px;


}







/* Card */


.demo-showcase-card{


background:#ffffff;


border-radius:25px;


overflow:hidden;


border:1px solid #e5e7eb;


transition:.4s;


}



.demo-showcase-card:hover{


transform:translateY(-10px);


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


}








/* Image */


.demo-showcase-image{


height:220px;


overflow:hidden;


}




.demo-showcase-image img{


width:100%;


height:100%;


object-fit:cover;


transition:.5s;


}



.demo-showcase-card:hover img{


transform:scale(1.08);


}








/* Content */


.demo-showcase-content{


padding:25px;


}






/* Category */


.demo-tag{


display:inline-block;


background:#eef2ff;


color:#4f46e5;


padding:6px 15px;


border-radius:20px;


font-size:13px;


font-weight:700;


margin-bottom:15px;


}





.demo-showcase-content h3{


font-size:24px;


font-weight:800;


color:#0f172a;


margin-bottom:12px;


}





.demo-showcase-content p{


font-size:15px;


line-height:1.7;


color:#64748b;


margin-bottom:20px;


}








/* Button */


.demo-view-btn{


display:inline-flex;


align-items:center;


gap:8px;


padding:10px 22px;


border-radius:30px;


background:#2563eb;


color:white;


text-decoration:none;


font-weight:700;


transition:.3s;


}



.demo-view-btn:hover{


background:#111827;


color:white;


}








/* Empty */


.demo-empty{


text-align:center;


padding:40px;


background:#f8fafc;


border-radius:20px;


}









/* Tablet */


@media(max-width:992px){



.demo-showcase-grid{


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


}



}








/* Mobile */


@media(max-width:768px){



.demo-showcase-section{


padding:50px 12px;


}



.demo-heading h2{


font-size:28px;


}



.demo-heading p{


font-size:15px;


}



.demo-showcase-grid{


grid-template-columns:1fr;


gap:18px;


}



.demo-showcase-image{


height:190px;


}



.demo-showcase-content{


padding:20px;


}



.demo-showcase-content h3{


font-size:20px;


}



.demo-showcase-content p{


font-size:14px;


}



}
/* =====================================================
   NEXORA DIGITAL - DEMO DETAILS PAGE CSS
===================================================== */



.demo-details-section{

    padding:80px 0;

    background:#f8fafc;

}




.demo-details-card{


    max-width:1000px;

    margin:auto;

    background:#ffffff;

    border-radius:30px;

    overflow:hidden;

    box-shadow:0 20px 50px rgba(0,0,0,.10);


}







/* Demo Image */


.demo-details-image{


    width:100%;

    height:450px;

    overflow:hidden;


}



.demo-details-image img{


    width:100%;

    height:100%;

    object-fit:cover;


}







/* Content */


.demo-details-content{


    padding:45px;


}





.demo-details-content h1{


    font-size:42px;

    font-weight:900;

    color:#0f172a;

    margin:15px 0 20px;


}




.demo-details-content p{


    font-size:17px;

    line-height:1.8;

    color:#64748b;


}





.demo-details-content hr{


    margin:35px 0;

    border:0;

    border-top:1px solid #e2e8f0;


}





.demo-details-content h3{


    font-size:24px;

    font-weight:800;

    color:#1e293b;

    margin-bottom:20px;


}








/* Category Badge */


.demo-tag{


    display:inline-block;

    background:#eef2ff;

    color:#4f46e5;

    padding:8px 18px;

    border-radius:30px;

    font-size:14px;

    font-weight:700;


}








/* Access Box */


.access-box{


    background:#f8fafc;

    border:1px solid #e2e8f0;

    border-radius:20px;

    padding:25px;

    margin-bottom:20px;


}




.access-box p{


    margin-bottom:15px;

    font-size:16px;


}




.access-box strong{


    color:#111827;

}







.password-text{


    color:#dc2626;

    font-weight:700;


}







/* Open Demo Button */


.demo-open-btn{


    display:inline-flex;

    align-items:center;

    justify-content:center;


    padding:14px 35px;


    background:linear-gradient(

    90deg,

    #2563eb,

    #7c3aed

    );


    color:#ffffff;


    border-radius:35px;


    text-decoration:none;


    font-size:16px;

    font-weight:700;


    transition:.3s;


}




.demo-open-btn:hover{


    transform:translateY(-3px);

    color:#fff;


}








/* Mobile */


@media(max-width:768px){



.demo-details-section{


    padding:40px 12px;


}



.demo-details-image{


    height:250px;


}



.demo-details-content{


    padding:25px 18px;


}




.demo-details-content h1{


    font-size:28px;


}



.demo-details-content p{


    font-size:15px;


}



.demo-details-content h3{


    font-size:20px;


}



.access-box{


    padding:18px;


}



.access-box p{


    font-size:14px;


}



.demo-open-btn{


    width:100%;


}


}