/*==================================
        PROJECT HERO
===================================*/

.projects-hero {

        position: relative;

        padding: 180px 0 120px;

        background: url(images/project-banner.jpg) center center/cover;

        overflow: hidden;

}

.hero-overlay {

        position: absolute;

        inset: 0;

        background: linear-gradient(90deg,

                        rgba(8, 27, 54, .90),

                        rgba(8, 27, 54, .75));

}

.projects-hero .container {

        position: relative;

        z-index: 2;

}

.hero-tag {

        display: inline-flex;

        align-items: center;

        gap: 10px;

        padding: 12px 24px;

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

        backdrop-filter: blur(12px);

        border-radius: 40px;

        color: #FFD166;

        margin-bottom: 25px;

}

.hero-tag i {

        color: #C59D2A;

}

.projects-hero h1 {
        font-family: 'Outfit', sans-serif;
        font-size: 68px;

        font-weight: 800;

        color: #fff;

        margin-bottom: 20px;

}

.projects-hero h1 span {

        color: #C59D2A;

}

.projects-hero p {

        max-width: 760px;

        margin: auto;

        font-size: 19px;

        line-height: 34px;

        color: #d8d8d8;

}

.project-breadcrumb {

        margin-top: 35px;

        display: flex;

        justify-content: center;

        gap: 15px;

}

.project-breadcrumb a {

        color: #fff;

        text-decoration: none;

}

.project-breadcrumb span {

        color: #C59D2A;

}

/*==================================
    FEATURED LOCATIONS
===================================*/

.featured-projects {

        padding: 40px 0 80px;

        background: #fff;

        margin-top: -45px;

        position: relative;

        z-index: 10;

}

.featured-projects h3 {
        font-family: 'Outfit', sans-serif;
        font-size: 26px;

        margin-bottom: 30px;

        font-weight: 700;

        color: #081B36;

}

.location-list {

        display: flex;

        justify-content: center;

        flex-wrap: wrap;

        gap: 18px;

}

.location-item {

        display: flex;

        align-items: center;

        gap: 10px;

        padding: 16px 30px;

        background: #fff;

        border: 1px solid #E8EDF4;

        border-radius: 50px;

        text-decoration: none;

        font-weight: 600;

        color: #081B36;

        transition: .35s;

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

}

.location-item i {

        color: #C59D2A;

}

.location-item:hover,

.location-item.active {

        background: #081B36;

        color: #fff;

        border-color: #081B36;

        transform: translateY(-5px);

}

.location-item:hover i,

.location-item.active i {

        color: #FFD166;

}

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

@media(max-width:991px) {

        .projects-hero {

                padding: 140px 0 90px;

        }

        .projects-hero h1 {

                font-size: 40px;

        }

        .projects-hero p {

                font-size: 16px;

                line-height: 28px;

        }

        .location-item {

                width: 100%;

                justify-content: center;

        }

}

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

.featured-location {

        padding: 100px 0;

        background: #F7F9FC;

}

.location-card {

        background: #fff;

        border-radius: 24px;

        overflow: hidden;

        box-shadow: 0 15px 40px rgba(0, 0, 0, .08);

        transition: .4s;

        height: 100%;

}

.location-card:hover {

        transform: translateY(-10px);

        box-shadow: 0 25px 60px rgba(0, 0, 0, .15);

}

.location-img {

        position: relative;

        overflow: hidden;

}

.location-img img {

        width: 100%;

        height: 260px;

        object-fit: cover;

        transition: .5s;

}

.location-card:hover img {

        transform: scale(1.08);

}

.badge-location {

        position: absolute;

        top: 20px;

        left: 20px;

        background: #C59D2A;

        color: #fff;

        padding: 10px 18px;

        border-radius: 40px;

        font-size: 13px;

        font-weight: 600;

}

.location-content {

        padding: 30px;

}

.location-content h3 {
        font-family: 'Outfit', sans-serif;
        font-size: 28px;

        font-weight: 700;

        margin-bottom: 15px;

        color: #081B36;

}

.location-content p {

        color: #666;

        line-height: 28px;

        margin-bottom: 20px;

}

.location-content ul {

        padding: 0;

        margin: 0 0 25px;

}

.location-content ul li {

        list-style: none;

        padding: 8px 0;

        color: #444;

}

.location-content ul i {

        color: #C59D2A;

        margin-right: 10px;

}

.location-content .btn {

        height: 52px;

        border-radius: 50px;

}