/* ---------------------------------
   CARD WRAPPER (outer container)
-----------------------------------*/
.property-type-card {
    /*    width: 472px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;*/
    width: 472px;
    height: 543px;
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

/* ---------------------------------
   IMAGE WRAP — sits ABOVE the card
-----------------------------------*/
/*.property-type-img-wrap {
    width: 100%;
    height: 0;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 5;
}*/


.property-type-img-wrap {
    width: 100%;
    /*height: 260px;*/ /* enough space for the image to appear */
    height: 358px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    z-index: 5;
}



    .property-type-img-wrap::after {
        content: "";
        width: 220px;
        height: 40px;
        background: rgba(0, 0, 0, 0.20);
        filter: blur(20px);
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 50%;
        z-index: 1;
    }

/* Image (Figma: 369×369) */
.property-type-icon {
    /*    width: 369px;
    height: 369px;
    object-fit: contain;
    margin-bottom: -170px;
    filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.28));*/
    width: 369px;
    height: 369px;
    object-fit: contain;
    position: absolute;
    bottom: 170px; /* pull image UP above the card */
    left: 50%;
    transform: translateX(-50%);
    filter: drop-shadow(0px 10px 20px rgba(0,0,0,0.28));
    z-index: 5;
}


/* ---------------------------------
   COLOR BLOCK (actual card design)
-----------------------------------*/
.property-type-bg {
    /*    width: 100%;
    height: 358px;
    border-radius: 20px;
    padding: 232px 57px 52px 57px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;*/
    width: 100%;
    height: 358px;
    border-radius: 20px;
    padding: 232px 57px 52px 57px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: green; /* overwritten by bg-dark-* */
    position: relative;
    z-index: 2;
}

/* Title text */
.property-type-name {
    /*    color: white;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;*/
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}




/* ---------------------------------
   SCROLL WRAPPER
-----------------------------------*/
.scroll-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 40px 0;
}

/* Make scroll full-width (no container limits) */
.full-width-scroll {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}


/* ---------------------------------
   SCROLL TRACK (animation)
-----------------------------------*/
.scroll-track {
    display: flex;
    gap: 40px;
    animation: scroll-left 10s linear infinite;
}

/* -- THIS WILL PAUSE SCORING -- */
/*
.scroll-wrapper:hover .scroll-track {
    animation-play-state: paused;
}
*/

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}


/* ---------------------------------
   RESPONSIVE — TABLET
-----------------------------------*/
@media (max-width: 1024px) {
    .scroll-track {
        gap: 24px;
        animation-duration: 15s;
    }

    .property-type-card {
        width: 360px;
        height:443px;
    }

    .property-type-icon {
        width: 260px;
        height: 260px;
        /*margin-bottom: -90px;*/
        /*        margin-bottom: -150px;*/
        bottom: 150px;
    }

    .property-type-bg {
        height: 300px;
        padding: 180px 40px 40px 40px;
    }

    .property-type-name {
        font-size: 16px;
    }
}


/* ---------------------------------
   RESPONSIVE — MOBILE
-----------------------------------*/
@media (max-width: 640px) {
    .scroll-track {
        gap: 16px;
        animation-duration: 20s;
    }

    .property-type-card {
        width: 280px;
        height: 343px;
    }

    .property-type-icon {
        width: 190px;
        height: 190px;
        /*      margin-bottom: -60px;*/
        /*        margin-bottom:-90px;*/
        bottom: 120px;
    }

    .property-type-bg {
        height: 250px;
        padding: 130px 24px 32px 24px;
    }

    .property-type-name {
        font-size: 14px;
    }
}


/* ---------------------------------
   BACKGROUND COLORS
-----------------------------------*/
.bg-dark-blue {
    background-color: #241C4F !important;
}

.bg-dark-orange {
    background-color: #F36C37 !important;
}

.bg-dark-yellow {
    background-color: #FFBA00 !important;
}