/*==================================================
    TOP HIGHLIGHTED PROJECTS
    PART 3.3
    CARD CONTENT + PRICE + BUTTONS
==================================================*/

/*==============================
    CARD CONTENT
==============================*/

.card-content{

    position:absolute;

    left:28px;

    right:28px;

    bottom:28px;

    z-index:20;

    color:#ffffff;

}

.card-content>*{

    position:relative;

    z-index:2;

}

/*==============================
    PROJECT TITLE
==============================*/

.project-title{

    font-size:30px;

    font-weight:700;

    line-height:38px;

    margin-bottom:10px;

    color:#ffffff;

    letter-spacing:-0.4px;

    transition:.35s;

}

.project-card:hover .project-title{

    color:#ffffff;

}

/*==============================
    DEVELOPER
==============================*/

.project-developer{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:18px;

    font-size:15px;

    color:rgba(255,255,255,.88);

}

.project-developer i{

    font-size:14px;

    color:#FFD54F;

}

/*==============================
    LOCATION
==============================*/

.project-location{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:18px;

    font-size:15px;

    color:#ffffff;

}

.project-location i{

    color:#FF6B6B;

}

/*==============================
    PROPERTY INFO
==============================*/

.project-info{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:22px;

}

.info-item{

    display:flex;

    align-items:center;

    gap:8px;

    padding:8px 14px;

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

    backdrop-filter:blur(12px);

    border-radius:30px;

    font-size:13px;

    color:#ffffff;

}

.info-item i{

    color:#FFD54F;

}

/*==============================
    PRICE AREA
==============================*/

.price-row{

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:20px;

}

.price-box{

    display:flex;

    flex-direction:column;

}

.price-label{

    font-size:13px;

    color:rgba(255,255,255,.72);

    margin-bottom:4px;

}

.price{

    font-size:32px;

    font-weight:700;

    line-height:36px;

    color:#ffffff;

}

.price small{

    font-size:16px;

    font-weight:500;

}

/*==============================
    BUTTONS
==============================*/

.card-actions{

    display:flex;

    gap:12px;

}

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:48px;

    padding:0 24px;

    border-radius:10px;

    background:#5B3DF5;

    color:#ffffff;

    font-size:15px;

    font-weight:600;

    transition:.35s;

}

.btn-primary:hover{

    background:#4728e8;

    transform:translateY(-2px);

}

.btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:48px;

    padding:0 24px;

    border-radius:10px;

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

    color:#ffffff;

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

    backdrop-filter:blur(12px);

    transition:.35s;

}

.btn-outline:hover{

    background:#ffffff;

    color:#222;

}

/*==============================
    RATING
==============================*/

.project-rating{

    position:absolute;

    top:22px;

    right:80px;

    display:flex;

    align-items:center;

    gap:6px;

    padding:8px 12px;

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

    backdrop-filter:blur(12px);

    border-radius:30px;

    color:#ffffff;

    font-size:13px;

    z-index:15;

}

.project-rating i{

    color:#FFD54F;

}

/*==============================
    HOVER EFFECT
==============================*/

.project-card:hover .price{

    color:#FFD54F;

}

.project-card:hover .btn-primary{

    box-shadow:0 10px 25px rgba(91,61,245,.35);

}

/*==============================
    RESPONSIVE
==============================*/

@media(max-width:1200px){

.card-content{

left:24px;

right:24px;

bottom:24px;

}

.project-title{

font-size:27px;

line-height:34px;

}

.price{

font-size:28px;

}

}

@media(max-width:992px){

.project-title{

font-size:24px;

line-height:30px;

}

.price-row{

flex-direction:column;

align-items:flex-start;

}

.card-actions{

width:100%;

}

.btn-primary,

.btn-outline{

flex:1;

}

}

@media(max-width:768px){

.card-content{

left:18px;

right:18px;

bottom:18px;

}

.project-title{

font-size:22px;

line-height:28px;

}

.project-location,

.project-developer{

font-size:14px;

}

.price{

font-size:24px;

}

.info-item{

font-size:12px;

padding:7px 12px;

}

.btn-primary,

.btn-outline{

height:44px;

font-size:14px;

}

}

@media(max-width:576px){

.project-title{

font-size:20px;

line-height:26px;

}

.project-info{

gap:8px;

}

.price{

font-size:22px;

}

.card-actions{

flex-direction:column;

}

.btn-primary,

.btn-outline{

width:100%;

}

.project-rating{

display:none;

}

}