.portfolio-header{
    background:#062b55;
    color:white;
    text-align:center;
    padding:70px 20px;
}

.portfolio-header h1{
    font-size:45px;
    margin-bottom:20px;
}

.portfolio-header p{
    max-width:850px;
    margin:auto;
    font-size:18px;
    line-height:1.7;
    color:#ddd;
}


/* PROJECT AREA */

.portfolio-area{

    background:#f5f7fa;
    padding:80px 8%;

}


/* CARD */

.project-card{

    background:white;

    display:grid;

    grid-template-columns:120px 1fr 180px;

    align-items:center;

    gap:40px;

    padding:45px;

    margin-bottom:35px;

    border-radius:18px;

    box-shadow:0 8px 25px rgba(0,0,0,0.08);

}


/* ICON */

.project-icon{

    width:90px;

    height:90px;

    background:#062b55;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

}


.project-icon img{

    width:45px;

    height:45px;

}





/* CONTENT */

.project-details{

    padding-right:20px;

}


.project-details h2{

    font-size:28px;

    color:#062b55;

    margin-bottom:10px;

}


.project-details h4{

    color:#f5a800;

    font-size:17px;

    margin-bottom:20px;

}


.project-details ul{

    padding-left:25px;

}


.project-details li{

    margin-bottom:12px;

    line-height:1.6;

    color:#444;

    font-size:16px;

}




/* VALUE BOX */

.project-cost{

    border-left:2px solid #e5e7eb;

    padding-left:35px;

    text-align:center;

}


.project-cost span{

    display:block;

    font-size:13px;

    font-weight:bold;

    color:#062b55;

}


.project-cost strong{

    display:block;

    font-size:48px;

    color:#f5a800;

    margin-top:10px;

}




/* MOBILE */

@media(max-width:900px){

.project-card{

grid-template-columns:1fr;

text-align:center;

}


.project-cost{

border-left:none;

border-top:1px solid #ddd;

padding-top:25px;

}

.project-details ul{

text-align:left;

}

}