/*=====================================================
  HOUSING STYLE PROPERTY SLIDER
  Part 1
======================================================*/

/*=============================
    GOOGLE FONT
==============================*/

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap');

/*=============================
    RESET
==============================*/

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

html{
    font-size:14.5px;
    scroll-behavior:smooth;
}

body{
    font-family:'Rubik',Helvetica,Arial,sans-serif;
    background:#ffffff;
    color:#222222;
    line-height:1.5;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
}

button{
    border:none;
    outline:none;
    cursor:pointer;
    background:none;
    font-family:inherit;
}

ul{
    list-style:none;
}

/*=============================
    CONTAINER
==============================*/

.container{

    width:100%;
    max-width:1280px;

    margin:auto;

    padding-left:24px;
    padding-right:24px;

}

/*=============================
    SECTION
==============================*/

.featured-projects{

    width:100%;

    padding-top:60px;
    padding-bottom:70px;

}

/*=============================
    HEADER
==============================*/

.section-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:36px;

}

.heading-left h2{

    font-size:36px;

    line-height:44px;

    font-weight:700;

    color:#222;

    margin-bottom:8px;

}

.heading-left p{

    font-size:18px;

    line-height:28px;

    font-weight:400;

    color:#666666;

}

/*=============================
    ARROWS
==============================*/

.heading-right{

    display:flex;

    align-items:center;

    gap:12px;

}

.slider-btn{

    width:52px;

    height:52px;

    border-radius:50%;

    background:#ffffff;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 8px 24px rgba(0,0,0,.12);

    transition:.30s ease;

}

.slider-btn i{

    font-size:18px;

    color:#444;

}

.slider-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 15px 35px rgba(0,0,0,.16);

}

/*=============================
    SLIDER
==============================*/

.slider{

    width:100%;

    overflow:hidden;

    position:relative;

}

.slider-track{

    display:flex;

    gap:22px;

    transition:transform .45s ease;

    will-change:transform;

}

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

.project-card{

    flex:0 0 calc(50% - 11px);

    min-width:calc(50% - 11px);

    border-radius:20px;

    overflow:hidden;

    background:#f8f8f8;

    position:relative;

    transition:.35s ease;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

}

.project-card:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 45px rgba(0,0,0,.16);

}

/*=============================
    IMAGE
==============================*/

.card-image{

    position:relative;

    width:100%;

    height:460px;

    overflow:hidden;

}

.card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .6s ease;

}

.project-card:hover img{

    transform:scale(1.08);

}

/*=============================
    IMAGE OVERLAY
==============================*/

.image-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,.82) 0%,
        rgba(0,0,0,.32) 45%,
        rgba(0,0,0,.05) 100%
    );

}

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

.card-content{

    position:absolute;

    left:24px;

    right:24px;

    bottom:24px;

    z-index:5;

    color:#ffffff;

}
/*=====================================================
  HOUSING STYLE PROPERTY SLIDER
  Part 2
======================================================*/

/*=============================
    BADGES
==============================*/

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:30px;

    padding:0 14px;

    margin-bottom:18px;

    border-radius:30px;

    background:#ffffff;

    color:#222;

    font-size:13px;

    font-weight:500;

    line-height:30px;

    letter-spacing:.2px;

    box-shadow:0 3px 10px rgba(0,0,0,.12);

}

.badge.pink{

    background:#ff2f7a;

    color:#ffffff;

}

.badge.green{

    background:#0ea45d;

    color:#ffffff;

}

.badge.orange{

    background:#ff9800;

    color:#ffffff;

}

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

.card-content h3{

    font-size:31px;

    font-weight:600;

    line-height:38px;

    color:#ffffff;

    margin-bottom:8px;

    letter-spacing:-0.3px;

    text-shadow:0 2px 10px rgba(0,0,0,.18);

}

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

.developer{

    display:block;

    font-size:15px;

    font-weight:400;

    line-height:22px;

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

    margin-bottom:20px;

}

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

.project-info{

    display:flex;

    flex-direction:column;

    gap:5px;

    margin-bottom:16px;

}

.project-info span:first-child{

    font-size:15px;

    font-weight:500;

    color:#ffffff;

    line-height:22px;

}

.project-info span:last-child{

    font-size:14px;

    font-weight:400;

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

    line-height:21px;

}

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

.price{

    font-size:28px;

    font-weight:700;

    line-height:34px;

    color:#ffffff;

    letter-spacing:-0.4px;

}

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

.card-content{

    transition:all .35s ease;

}

.project-card:hover .card-content{

    transform:translateY(-5px);

}

.project-card:hover .developer{

    color:#ffffff;

}

.project-card:hover .project-info span:last-child{

    color:#f5f5f5;

}

/*=============================
    IMAGE ANIMATION
==============================*/

.card-image img{

    transition:
        transform .7s ease,
        filter .45s ease;

}

.project-card:hover .card-image img{

    transform:scale(1.08);

    filter:brightness(1.05);

}

/*=============================
    OVERLAY ANIMATION
==============================*/

.image-overlay{

    transition:opacity .35s ease;

}

.project-card:hover .image-overlay{

    opacity:.94;

}

/*=============================
    CARD BORDER
==============================*/

.project-card{

    border:1px solid rgba(0,0,0,.04);

}

/*=============================
    CARD TRANSITION
==============================*/

.project-card{

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.project-card:hover{

    border-color:rgba(0,0,0,.08);

}

/*=============================
    SLIDER SPACING
==============================*/

.slider-track{

    padding-bottom:12px;

}

/*=============================
    CURSOR
==============================*/

.slider{

    cursor:grab;

}

.slider:active{

    cursor:grabbing;

}
/*=====================================================
  HOUSING STYLE PROPERTY SLIDER
  Part 3 (Responsive)
======================================================*/

/*=============================
    LARGE DESKTOP
==============================*/

@media (max-width:1440px){

    .container{
        max-width:1280px;
    }

    .heading-left h2{
        font-size:34px;
        line-height:42px;
    }

    .card-image{
        height:430px;
    }

    .price{
        font-size:26px;
    }

}

/*=============================
    DESKTOP
==============================*/

@media (max-width:1200px){

    .container{
        max-width:1140px;
        padding-left:20px;
        padding-right:20px;
    }

    .section-header{
        margin-bottom:28px;
    }

    .heading-left h2{
        font-size:30px;
        line-height:38px;
    }

    .heading-left p{
        font-size:16px;
    }

    .slider-track{
        gap:18px;
    }

    .project-card{

        flex:0 0 calc(50% - 9px);

        min-width:calc(50% - 9px);

    }

    .card-image{
        height:380px;
    }

    .card-content{
        left:20px;
        right:20px;
        bottom:20px;
    }

    .card-content h3{
        font-size:28px;
        line-height:34px;
    }

    .developer{
        font-size:14px;
    }

    .price{
        font-size:24px;
        line-height:30px;
    }

}

/*=============================
    TABLET
==============================*/

@media (max-width:992px){

    .featured-projects{
        padding:50px 0;
    }

    .section-header{
        flex-direction:column;
        align-items:flex-start;
        gap:18px;
    }

    .heading-right{
        width:100%;
        justify-content:flex-end;
    }

    .slider-track{
        gap:16px;
    }

    .project-card{

        flex:0 0 100%;

        min-width:100%;

    }

    .card-image{
        height:420px;
    }

    .slider-btn{
        width:46px;
        height:46px;
    }

    .slider-btn i{
        font-size:16px;
    }

}

/*=============================
    MOBILE
==============================*/

@media (max-width:768px){

    .container{

        padding-left:16px;

        padding-right:16px;

    }

    .featured-projects{

        padding:40px 0;

    }

    .heading-left h2{

        font-size:26px;

        line-height:34px;

    }

    .heading-left p{

        font-size:15px;

        line-height:22px;

    }

    .card-image{

        height:320px;

    }

    .card-content{

        left:16px;

        right:16px;

        bottom:16px;

    }

    .badge{

        min-height:28px;

        padding:0 12px;

        font-size:12px;

        margin-bottom:14px;

    }

    .card-content h3{

        font-size:22px;

        line-height:28px;

    }

    .developer{

        font-size:13px;

        line-height:20px;

        margin-bottom:14px;

    }

    .project-info{

        margin-bottom:12px;

    }

    .project-info span:first-child{

        font-size:14px;

    }

    .project-info span:last-child{

        font-size:13px;

    }

    .price{

        font-size:21px;

        line-height:26px;

    }

    .slider-btn{

        width:42px;

        height:42px;

    }

}

/*=============================
    SMALL MOBILE
==============================*/

@media (max-width:576px){

    .featured-projects{

        padding:30px 0;

    }

    .heading-left h2{

        font-size:22px;

        line-height:30px;

    }

    .heading-left p{

        font-size:14px;

    }

    .card-image{

        height:260px;

    }

    .card-content{

        left:14px;

        right:14px;

        bottom:14px;

    }

    .card-content h3{

        font-size:20px;

        line-height:26px;

    }

    .developer{

        font-size:12px;

    }

    .project-info span:first-child{

        font-size:13px;

    }

    .project-info span:last-child{

        font-size:12px;

    }

    .price{

        font-size:18px;

        line-height:24px;

    }

    .badge{

        font-size:11px;

        padding:0 10px;

    }

    .slider-btn{

        width:38px;

        height:38px;

    }

    .slider-btn i{

        font-size:14px;

    }

}

/*=============================
    UTILITIES
==============================*/

.text-center{
    text-align:center;
}

.w-100{
    width:100%;
}

.d-flex{
    display:flex;
}

.align-center{
    align-items:center;
}

.justify-between{
    justify-content:space-between;
}

.hidden{
    overflow:hidden;
}

.shadow{
    box-shadow:0 10px 30px rgba(0,0,0,.12);
}

.rounded{
    border-radius:20px;
}

/*=============================
    SCROLLBAR
==============================*/

::-webkit-scrollbar{
    width:8px;
    height:8px;
}

::-webkit-scrollbar-thumb{
    background:#d5d5d5;
    border-radius:30px;
}

::-webkit-scrollbar-thumb:hover{
    background:#b5b5b5;
}

::-webkit-scrollbar-track{
    background:#f5f5f5;
}