*{
margin:0;
padding:0;
box-sizing:border-box;
}


.prop_container{
    max-width:1600px;
    margin:auto;
    padding-top:5px;
    padding-bottom:15px;
    padding-left:15px;
    padding-right:15px;
    --primary: #2563EB;
    --dark: #0F172A;
    --bg: #F8FAFC;
    --card: #FFFFFF;
    --border: #E2E8F0;
    --text: #475569;
    --success: #16A34A;
    --warning: #F59E0B;
}

.prop_hero{
height:360px; 
border-radius:34px; 
overflow:hidden; 
position:relative; 
    background:linear-gradient(135deg,#2563EB,#1D4ED8);
    color:white;
    border-radius:32px;
    margin-bottom:30px;
    margin-top:0px;
}

.prop_hero img{
width:100%;
height:100%;
object-fit:cover;
filter: brightness(0.5);
}

.prop_hero-overlay{
position:absolute;
inset:0;
padding:40px;
display:flex;
flex-direction:column;
justify-content:flex-end;
background: linear-gradient( 180deg, transparent, rgba( 0, 0, 0, .65) ); 
color:white; 
}

.prop_hero-actions{
display:flex; 
gap:12px; 
margin-top:18px; 
flex-wrap:wrap; 
    height: 50px;
}

.prop_hero-icon { 
    width:60px; 
    height:60px; 
    border-radius:12px; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    background:#f1f5f9; 
    color:#2563eb; 
    font-size:25px; 
}

.prop_hero-button {
    background: white;
    color: #2563EB;
    padding: 14px 20px;
    border-radius: 14px;
    font-weight: 700;
    text-decoration: none;
}

.prop_hero2{
background: linear-gradient( 135deg, #2563EB, #1D4ED8); 
color:white; 
padding:42px; 
border-radius:34px; 
display:flex; 
justify-content:space-between; 
gap:24px; 
flex-wrap:wrap; 
margin-bottom:24px; 
}

.prop_hero2 h1{
font-size:46px; 
margin-bottom:10px; 
}

.prop_stats{
display:grid;
grid-template-columns: repeat( 4, 1fr);
gap:12px; 
margin-top:24px; 
}

.prop_btn{
background:white;
color:#2563EB;
padding:14px 18px;
border-radius:14px;
text-decoration:none;
font-weight:700;
height: fit-content;
}

.prop_grid{
display:grid;
grid-template-columns: 1.3fr 1fr; gap:24px; 
margin-bottom:24px; 
}

.prop_stack{
display:grid;
gap:24px;
}

.prop_card{
background:white;
padding:28px;
border-radius:28px;
}

.prop_metrics{
display:grid;
grid-template-columns: repeat( 4, 1fr); 
gap:14px; 
}

.prop_metric{
background:#F8FAFC;
padding:18px;
border-radius:18px;
text-align:center;
}

.prop_split{
display:grid;
grid-template-columns: 1fr 1fr; 
gap:24px;
}

.prop_asset-photo{
width:100%;
height:360px;
object-fit:cover;
border-radius:22px;
}

.prop_photo-summary{
margin-top:18px;
background:#F8FAFC;
padding:22px;
border-radius:18px;
}

#map{
height:360px;
border-radius:20px;
overflow:hidden;
}

#map2{
height:520px;
border-radius:22px;
overflow:hidden;
}

.prop_map-card{
margin-bottom:24px;
}

.prop_quick{
display:grid; 
grid-template-columns: repeat( auto-fit, minmax( 180px, 1fr)); 
gap:16px; 
margin-top:20px; 
}

.pro_quick-card{
background:#F8FAFC;
padding:24px;
border-radius:22px;
text-align:center; 
cursor:pointer; 
}

.prop_assets{
display:grid;
grid-template-columns: repeat( auto-fit, minmax( 320px, 1fr)); 
gap:18px; 
}

.prop_asset{
overflow:hidden;
border-radius:24px;
background:#F8FAFC;
}

.prop_asset img{
width:100%;
height:180px;
object-fit:cover;
}

.prop_asset-body{
padding:22px;
}

.prop_schedules{
display:grid;
gap:16px;
}

.prop_schedule{
background:#F8FAFC;
padding:22px;
border-radius:18px;
}

.prop_providers{
display:grid;
grid-template-columns: repeat( auto-fit, minmax( 320px, 1fr)); 
gap:18px; 
}

.prop_provider{
overflow:hidden;
border-radius:26px;
background:#F8FAFC;
}

.prop_provider img{
height:170px;
width:100%;
object-fit:cover;
}

img{
border-radius:14px;
}


.prop_provider-body{
padding:22px;
}

.prop_timeline{
display:grid;
gap:14px;
}

.prop_event{
padding:18px;
border-radius:18px;
background:#F8FAFC;
}

.prop_actions{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:18px;
}

.prop_action2{
padding:12px 16px;
background:#2563EB;
color:white;
text-decoration:none;
border-radius:12px;
}

.prop_action{
background:#2563EB;
color:white;
padding:12px 16px;
border-radius:12px;
text-decoration:none;
}

.prop_badge{
display:inline-flex;
padding:6px 10px;
border-radius:999px;
background:#DBEAFE;
color:#2563EB;
font-size:12px;
margin-top:10px;
}

.content-layout{ 
display:grid; 
grid-template-columns: 1.7fr 420px; 
gap:24px; 
align-items:start; 
}

.property-column{
display:grid;
gap:24px;
}

.aside-column{
display:grid;
gap:24px;
position:sticky;
top:24px;
}



/* ==========================================
   Standard Section
==========================================*/

.prop_section{

    background:white;

    border-radius:28px;

    padding:28px;

    margin-bottom:24px;

}

.prop_section-header{ 
    display:flex; 
    justify-content:space-between; 
    align-items:flex-start; 
    margin-bottom:22px; 
}

.prop_section-header h2{

    font-size:30px;

    color:#0F172A;

    margin-bottom:4px;

}

.prop_section-header p{

    color:#64748B;

    margin:0;

}


/* ==========================================
   Information Grid
==========================================*/

.prop_info-grid{

    display:grid;

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

    gap:18px;

    margin-top:20px;

}

.prop_info{

    background:#F8FAFC;

    border-radius:16px;

    padding:18px;

}

.prop_info label{

    display:block;

    font-size:12px;

    text-transform:uppercase;

    color:#64748B;

    margin-bottom:6px;

}

.prop_info strong{

    font-size:18px;

    color:#0F172A;

}


/* ==========================================
   Avatar
==========================================*/

.prop_avatar{

    width:84px;

    height:84px;

    border-radius:50%;

    object-fit:cover;

}


/* ========================================================= */
/* NUBILO GETTING STARTED */
/* ========================================================= */

.nubilo_progress{
    margin-top:24px;
}


.nubilo_progress-track{
    width:100%;
    height:12px;
    background:#E2E8F0;
    border-radius:999px;
    overflow:hidden;
}


.nubilo_progress-fill{
    height:100%;
    background:#2563EB;
    border-radius:999px;
    transition:width .4s ease;
}


.nubilo_progress-summary{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:10px;
    color:#64748B;
}


.nubilo_progress-summary strong{
    font-size:24px;
    color:#0F172A;
}


/* ========================================================= */
/* SETUP LIST */
/* ========================================================= */

.nubilo_setup-list{
    display:grid;
    gap:12px;
}


.nubilo_setup-card{
    display:flex;
    align-items:center;
    gap:18px;

    padding:20px;

    background:#F8FAFC;

    border:2px solid transparent;

    border-radius:20px;

    text-decoration:none;

    color:#0F172A;

    transition:
        transform .15s ease,
        border-color .15s ease,
        background .15s ease,
        box-shadow .15s ease;
}


.nubilo_setup-card:hover{

    transform:translateY(-2px);

    border-color:#CBD5E1;

    background:#FFFFFF;

    box-shadow:0 8px 24px rgba(15,23,42,.06);

}


.nubilo_setup-card.next{

    border-color:#2563EB;

    background:#EFF6FF;

}


.nubilo_setup-card.complete{

    background:#F8FAFC;

}

/* ========================================================= */
/* GETTING STARTED - COMPLETED STAGE */
/* ========================================================= */

.gs_stage_complete {
    border: 1px solid #BBF7D0;
    background: #FFFFFF;
}


/* Stage header */

.gs_stage_header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px 28px;
    border-bottom: 1px solid #E2E8F0;
}


.gs_stage_number {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 20px;
    font-weight: 700;
}


.gs_stage_number.gs_complete {
    background: #DCFCE7;
    color: #16A34A;
}


.gs_stage_title {
    flex: 1;
}


.gs_stage_label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 3px;
}


.gs_stage_title h2 {
    margin: 0 0 4px 0;
    font-size: 22px;
    color: #0F172A;
}


.gs_stage_title p {
    margin: 0;
    color: #64748B;
}


.gs_status_badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 7px 12px;
    border-radius: 999px;

    font-size: 12px;
    font-weight: 700;
}


.gs_status_complete {
    background: #DCFCE7;
    color: #15803D;
}


/* Content */

.gs_stage_content {
    padding: 28px;
}


/* Completion message */

.gs_completed_message {
    display: flex;
    align-items: flex-start;
    gap: 16px;

    background: #F0FDF4;
    border-radius: 18px;
    padding: 20px;

    margin-bottom: 24px;
}


.gs_completed_icon {
    width: 42px;
    height: 42px;
    min-width: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #DCFCE7;
    color: #16A34A;

    border-radius: 12px;
    font-size: 18px;
}


.gs_completed_message h3 {
    margin: 0 0 6px 0;
    font-size: 18px;
    color: #166534;
}


.gs_completed_message p {
    margin: 0;
    color: #475569;
    line-height: 1.6;
}


/* Details */

.gs_details_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}


.gs_detail {
    background: #F8FAFC;
    border-radius: 16px;
    padding: 18px;
}


.gs_detail_label {
    display: block;
    font-size: 12px;
    color: #64748B;
    margin-bottom: 7px;
}


.gs_detail strong {
    display: block;
    font-size: 15px;
    color: #0F172A;
}


.gs_detail strong i {
    color: #16A34A;
    margin-right: 5px;
}


/* Actions */

.gs_stage_actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;

    margin-top: 24px;
}


.gs_action_primary,
.gs_action_secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 11px 16px;

    border-radius: 12px;

    text-decoration: none;

    font-weight: 700;
}


.gs_action_primary {
    background: #2563EB;
    color: #FFFFFF;
}


.gs_action_secondary {
    background: #F1F5F9;
    color: #334155;
}


.gs_action_primary:hover,
.gs_action_secondary:hover {
    text-decoration: none;
    opacity: .9;
}


/* ========================================================= */
/* NUMBER */
/* ========================================================= */

.nubilo_setup-number{

    width:38px;
    height:38px;

    flex:0 0 38px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#E2E8F0;

    color:#475569;

    font-weight:800;
}


.nubilo_setup-card.complete
.nubilo_setup-number{

    background:#DCFCE7;

    color:#16A34A;

}


/* ========================================================= */
/* ICON */
/* ========================================================= */

.nubilo_setup-icon{

    width:48px;
    height:48px;

    flex:0 0 48px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:16px;

    background:#DBEAFE;

    color:#2563EB;

    font-size:20px;
}


.nubilo_setup-card.complete
.nubilo_setup-icon{

    background:#F0FDF4;

    color:#16A34A;

}


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

.nubilo_setup-body{

    flex:1;
}


.nubilo_setup-body h3{

    margin:0 0 5px;

    font-size:18px;

    font-weight:700;

}


.nubilo_setup-body p{

    margin:0 0 8px;

    color:#64748B;

    line-height:1.5;

}


.nubilo_setup-status{

    display:inline-flex;

    padding:5px 10px;

    border-radius:999px;

    background:#E2E8F0;

    color:#475569;

    font-size:12px;

    font-weight:700;

}


.nubilo_setup-card.next
.nubilo_setup-status{

    background:#DBEAFE;

    color:#2563EB;

}


.nubilo_setup-card.complete
.nubilo_setup-status{

    background:#DCFCE7;

    color:#15803D;

}


/* ========================================================= */
/* ARROW */
/* ========================================================= */

.nubilo_setup-arrow{

    color:#94A3B8;

    font-size:16px;

}


.nubilo_setup-card:hover
.nubilo_setup-arrow{

    color:#2563EB;

}


/* ========================================================= */
/* NEXT STEP */
/* ========================================================= */

.nubilo_next-step{

    text-align:center;

    padding:10px 5px;

}


.nubilo_next-icon{

    width:70px;
    height:70px;

    margin:0 auto 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

    background:#DBEAFE;

    color:#2563EB;

    font-size:28px;

}


.nubilo_next-step h3{

    font-size:21px;

    margin-bottom:10px;

}


.nubilo_next-step p{

    color:#64748B;

    line-height:1.6;

    margin-bottom:20px;

}




/* =========================================================
   REFERRAL REWARDS
   ========================================================= */

.referral-section {
    margin: 30px 0;
}

.referral-section-header {
    margin-bottom: 25px;
}

.referral-section-header .section-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
    opacity: 0.65;
}

.referral-section-header h2 {
    margin: 0 0 8px 0;
    font-size: 26px;
    font-weight: 600;
}

.referral-section-header p {
    margin: 0;
    max-width: 700px;
    color: #777;
}


/* GRID */

.referral-rewards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}


/* CARD */

.referral-reward-card {
    position: relative;
    padding: 24px;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
    background: #fff;
    min-height: 430px;

    display: flex;
    flex-direction: column;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.referral-reward-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}


/* TOP */

.reward-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.reward-number {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-weight: 700;
    font-size: 14px;

    background: #f1f1f1;
}

.reward-status {
    font-size: 12px;
    font-weight: 600;
}

.reward-status i {
    margin-right: 5px;
}


/* ICON */

.reward-icon {
    width: 52px;
    height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #f4f6f7;

    font-size: 22px;

    margin-bottom: 18px;
}


/* TITLE */

.referral-reward-card h3 {
    font-size: 19px;
    line-height: 1.3;
    margin: 0 0 18px 0;
}


/* REQUIREMENT */

.reward-requirement {
    margin-bottom: 10px;
}

.reward-requirement span,
.reward-benefit-label {
    display: block;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1px;
    text-transform: uppercase;

    opacity: 0.55;

    margin-bottom: 5px;
}

.reward-requirement strong {
    font-size: 14px;
}


/* PROGRESS */

.reward-progress {
    width: 100%;
    height: 7px;

    background: #eeeeee;

    border-radius: 10px;

    overflow: hidden;

    margin-bottom: 22px;
}

.reward-progress-bar {
    height: 100%;

    border-radius: 10px;

    transition: width 0.3s ease;
}


/* BENEFIT */

.reward-benefit {
    flex: 1;

    padding: 16px;

    border-radius: 8px;

    background: #f7f8f8;

    margin-bottom: 18px;
}

.reward-benefit strong {
    display: block;

    font-size: 15px;

    margin-bottom: 7px;
}

.reward-benefit p {
    margin: 0;

    font-size: 13px;
    line-height: 1.5;

    color: #777;
}


/* REMAINING */

.reward-remaining {
    text-align: center;

    font-size: 13px;

    padding: 10px;

    color: #777;
}


/* COMPLETE */

.reward-complete-message {
    padding: 11px;

    text-align: center;

    border-radius: 6px;

    font-weight: 600;

    font-size: 13px;
}


/* =========================================================
   PENDING
   ========================================================= */

.reward-pending {
    background: #fff;

    border-color: #e5e5e5;
}

.reward-pending .reward-status {
    color: #999;
}

.reward-pending .reward-progress-bar {
    background: #bbb;
}


/* =========================================================
   ACHIEVED
   ========================================================= */

.reward-achieved {
    border-color: #26b99a;

    box-shadow:
        0 4px 18px rgba(38,185,154,0.12);
}

.reward-achieved .reward-number {
    background: #26b99a;
    color: #fff;
}

.reward-achieved .reward-status {
    color: #26b99a;
}

.reward-achieved .reward-icon {
    background: #eaf8f4;
    color: #26b99a;
}

.reward-achieved .reward-progress-bar {
    background: #26b99a;
}


/* =========================================================
   COMPLETED
   ========================================================= */

.reward-complete {
    border-color: #26b99a;

    background: #f8fcfb;
}

.reward-complete .reward-number {
    background: #26b99a;
    color: #fff;
}

.reward-complete .reward-status {
    color: #26b99a;
}

.reward-complete .reward-icon {
    background: #eaf8f4;
    color: #26b99a;
}

.reward-complete .reward-progress-bar {
    background: #26b99a;
}

.reward-complete-message {
    background: #eaf8f4;
    color: #208c76;
}



@media(max-width:1400px){

.prop_grid,
.prop-split{
grid-template-columns:1fr; 
}

.prop_stack{
padding:0px;
}


}


@media (max-width: 1100px) {

    .referral-rewards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media(max-width:900px){

.prop_container{
padding:0px;
}

.prop_hero{
height:300px; 
}

.content-layout{
grid-template-columns:1fr;
}


    .nubilo_setup-card{

        padding:16px;

        gap:12px;

    }


    .nubilo_setup-number{

        width:32px;
        height:32px;

        flex-basis:32px;

        font-size:13px;

    }


    .nubilo_setup-icon{

        width:42px;
        height:42px;

        flex-basis:42px;

        border-radius:14px;

        font-size:17px;

    }


    .nubilo_setup-body h3{

        font-size:16px;

    }


    .nubilo_setup-body p{

        font-size:14px;

    }


    .nubilo_setup-arrow{

        display:none;

    }

    .gs_stage_header {
        align-items: flex-start;
    }

    .gs_stage_status {
        margin-left: auto;
    }

    .gs_details_grid {
        grid-template-columns: 1fr 1fr;
    }
}


@media (max-width: 700px) {

    .referral-rewards-grid {
        grid-template-columns: 1fr;
    }

    .referral-reward-card {
        min-height: auto;
    }

}

@media(max-width:600px){

    .nubilo_setup-card{

        align-items:flex-start;

    }


    .nubilo_setup-number{

        display:none;

    }


    .nubilo_setup-icon{

        flex-shrink:0;

    }

    .gs_stage_header {
        flex-wrap: wrap;
    }

    .gs_stage_status {
        width: 100%;
        margin-left: 66px;
    }

    .gs_stage_content {
        padding: 20px;
    }

    .gs_details_grid {
        grid-template-columns: 1fr;
    }

    .gs_stage_actions {
        flex-direction: column;
    }

    .gs_action_primary,
    .gs_action_secondary {
        justify-content: center;
    }

    .prop_section-header{
    display: block;
    }



}