/*
|--------------------------------------------------------------------------
| DWALLNET PORTFOLIO SECTION
|--------------------------------------------------------------------------
*/


.dw-portfolio-section{


    padding:100px 5%;

    background:#f8fafc;

    position:relative;

    overflow:hidden;


}






/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
*/


.dw-portfolio-header{


    text-align:center;

    max-width:750px;

    margin:0 auto 60px;


}




.dw-portfolio-header span{


    color:#2563eb;

    font-size:14px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:3px;


}




.dw-portfolio-header h2{


    font-size:45px;

    margin:15px 0;

    color:#0f172a;

    font-weight:900;


}




.dw-portfolio-header p{


    font-size:18px;

    color:#64748b;

    line-height:1.7;


}





/*
|--------------------------------------------------------------------------
| CAROUSEL
|--------------------------------------------------------------------------
*/


.dw-portfolio-carousel{


    display:flex;

    gap:35px;

    overflow-x:auto;

    scroll-behavior:smooth;

    padding:20px 5px 40px;


}





.dw-portfolio-carousel::-webkit-scrollbar{


    height:8px;


}




.dw-portfolio-carousel::-webkit-scrollbar-thumb{


    background:#2563eb;

    border-radius:20px;


}







/*
|--------------------------------------------------------------------------
| PROJECT CARD
|--------------------------------------------------------------------------
*/


.dw-project-card{


    min-width:360px;

    background:white;

    border-radius:30px;

    overflow:hidden;


    border:1px solid rgba(226,232,240,.8);


    box-shadow:


    0 25px 60px rgba(15,23,42,.08);



    transition:.45s ease;


}




.dw-project-card:hover{


    transform:translateY(-15px);


    box-shadow:


    0 40px 80px rgba(15,23,42,.18);


}







/*
|--------------------------------------------------------------------------
| IMAGE
|--------------------------------------------------------------------------
*/


.dw-project-image{


    height:240px;

    overflow:hidden;


}




.dw-project-image img{


    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s ease;


}





.dw-project-card:hover img{


    transform:scale(1.12);


}







/*
|--------------------------------------------------------------------------
| CONTENT
|--------------------------------------------------------------------------
*/


.dw-project-content{


    padding:30px;


}





.dw-project-category{


    display:inline-block;


    padding:7px 15px;


    border-radius:50px;


    background:#eff6ff;


    color:#2563eb;


    font-size:12px;


    font-weight:800;


    text-transform:uppercase;



}







.dw-project-content h3{


    font-size:28px;

    margin:18px 0 12px;

    color:#0f172a;


}







.dw-project-content p{


    color:#64748b;

    line-height:1.7;

    min-height:80px;


}







.dw-project-link{


    display:inline-flex;

    align-items:center;


    margin-top:20px;


    padding:13px 28px;


    background:#2563eb;


    color:white;


    border-radius:50px;


    font-weight:700;


    text-decoration:none;


    transition:.3s;


}




.dw-project-link:hover{


    background:#1d4ed8;

    color:white;


}





/*
|--------------------------------------------------------------------------
| DARK MODE
|--------------------------------------------------------------------------
*/


.dark-mode .dw-portfolio-section{


    background:#020617;


}



.dark-mode .dw-project-card{


    background:#0f172a;

    border-color:#1e293b;


}



.dark-mode .dw-project-content h3{


    color:white;


}



.dark-mode .dw-project-content p{


    color:#cbd5e1;


}



.dark-mode .dw-portfolio-header h2{


    color:white;


}




/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/


@media(max-width:768px){



.dw-portfolio-section{


    padding:70px 20px;


}



.dw-portfolio-header h2{


    font-size:32px;


}



.dw-project-card{


    min-width:280px;


}



.dw-project-image{


    height:190px;


}



}