/*==================================================
    TOP HIGHLIGHTED PROJECTS
    PART 3.1
    SECTION + HEADER + NAVIGATION
==================================================*/

.featured-projects{

    position:relative;

    padding:80px 0;

    background:#ffffff;

    overflow:hidden;

}

.featured-projects .container{

    position:relative;

}

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

.section-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:45px;

}

.heading-left{

    max-width:650px;

}

.heading-left h2{

    font-family:'Rubik',sans-serif;

    font-size:36px;

    font-weight:600;

    color:#1f2937;

    line-height:46px;

    letter-spacing:-0.5px;

    margin-bottom:12px;

}

.heading-left p{

    font-size:16px;

    color:#6b7280;

    line-height:28px;

    font-weight:400;

}

/*==============================
    RIGHT SIDE
==============================*/

.heading-right{

    display:flex;

    align-items:center;

    gap:16px;

}

/*==============================
    VIEW ALL BUTTON
==============================*/

.view-all{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:12px 24px;

    border-radius:40px;

    background:#5b3df5;

    color:#ffffff;

    font-size:15px;

    font-weight:500;

    transition:.3s ease;

}

.view-all:hover{

    background:#4423ef;

    transform:translateY(-2px);

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

}

.view-all i{

    font-size:14px;

}

/*==============================
    SLIDER BUTTON GROUP
==============================*/

.slider-navigation{

    display:flex;

    align-items:center;

    gap:12px;

}

/*==============================
    COMMON BUTTON
==============================*/

.slider-btn{

    width:52px;

    height:52px;

    border-radius:50%;

    background:#ffffff;

    border:1px solid #e5e7eb;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.3s ease;

    box-shadow:0 4px 12px rgba(0,0,0,.05);

}

.slider-btn:hover{

    background:#5b3df5;

    border-color:#5b3df5;

    color:#ffffff;

    transform:translateY(-2px);

}

.slider-btn i{

    font-size:18px;

}

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

.slider{

    position:relative;

    overflow:hidden;

    width:100%;

}

/*==============================
    TRACK
==============================*/

.slider-track{

    display:flex;

    gap:24px;

    will-change:transform;

    transition:transform .45s ease;

}

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

.project-card{

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

}

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

@media(max-width:1200px){

    .featured-projects{

        padding:70px 0;

    }

    .heading-left h2{

        font-size:32px;

        line-height:42px;

    }

}

@media(max-width:992px){

    .section-header{

        flex-direction:column;

        align-items:flex-start;

        gap:20px;

    }

    .heading-right{

        width:100%;

        justify-content:space-between;

    }

}

@media(max-width:768px){

    .featured-projects{

        padding:60px 0;

    }

    .heading-left h2{

        font-size:28px;

        line-height:36px;

    }

    .heading-left p{

        font-size:15px;

        line-height:24px;

    }

    .slider-btn{

        width:44px;

        height:44px;

    }

    .project-card{

        flex:0 0 100%;

    }

}

@media(max-width:576px){

    .featured-projects{

        padding:45px 0;

    }

    .heading-left h2{

        font-size:24px;

        line-height:32px;

    }

    .view-all{

        padding:10px 18px;

        font-size:14px;

    }

    .slider-btn{

        width:40px;

        height:40px;

    }

}