/* ==========================================================
   FEATURED PROJECTS
========================================================== */

.featured-projects{
    position:relative;
    padding:110px 0 130px;
    background:#fff;
    overflow:hidden;
}

.featured-projects::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:800px;
    height:350px;
    background:radial-gradient(circle,
        rgba(215,155,43,.07),
        transparent 72%);
    pointer-events:none;
}

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

.featured-projects .section-header{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.featured-projects .section-header__eyebrow{

    display:inline-block;

    margin-bottom:18px;

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.22em;

    text-transform:uppercase;

    color:#D79B2B;

}

.featured-projects .section-header__title{

    margin:0 0 18px;

    font-size:2.65rem;

    line-height:1.18;

    font-weight:700;

    letter-spacing:-.02em;

    color:#111827;

}

.featured-projects .section-header__description{

    margin:0;

    font-size:1.05rem;

    line-height:1.8;

    color:#6B7280;

}

/* ==========================================================
   SWIPER
========================================================== */

.featured-projects__slider{

    position:relative;

    overflow:visible;

}

.featured-project{

    position:relative;

    padding-bottom:90px;

}

.featured-project__image{

    position:relative;

    border-radius:24px;

    overflow:hidden;

    box-shadow:
        0 25px 70px rgba(15,46,99,.12);

}

.featured-project__image img{

    display:block;

    width:100%;

    aspect-ratio:16 / 7;
    min-height:500px;

    object-fit:cover;
    
    object-position:center;

    transition:transform .7s ease;

}

.swiper-slide-active .featured-project__image img{

    transform:scale(1.03);

}

/* ==========================================================
   APPROVAL BADGE
========================================================== */

.featured-project__approval{

    position:absolute;

    top:24px;

    right:24px;

    width:90px;

    height:auto;

    z-index:3;

    filter:drop-shadow(0 8px 18px rgba(0,0,0,.18));

}

/* ==========================================
PROJECT APPROVAL BADGE
========================================== */

.project-badge{

    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:7px 12px;

    background:#0F2E63;

    color:#ffffff;

    border:1px solid rgba(215,155,43,.35);

    border-radius:999px;

    font-size:12px;
    font-weight:600;
    letter-spacing:.02em;

    box-shadow:0 8px 20px rgba(15,46,99,.15);

}

.project-badge svg{

    width:15px;
    height:15px;

    color:#D79B2B;

    stroke-width:2.4;

    flex-shrink:0;

}

.project-badge--cmda{

    background:#23477f;

}

.project-badge--rera{

    background:#1B5E20;

}

/* ==========================================
   PROJECT CARD HEADER
========================================== */

.project-card__header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-bottom:18px;

}

.project-card__title{

    margin:0;

    font-size:2rem;

    font-weight:700;

    line-height:1.2;

    color:#111827;

}

.project-card__header .project-badge{

    flex-shrink:0;

}

/* ==========================================================
   PROJECT CTA
========================================================== */

.project-card__link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:2px;

    padding:0;

    font-family:inherit;

    font-size:.95rem;

    font-weight:700;

    line-height:1;

    color:#0F2E63;

    text-decoration:none;

    transition:
        color .3s ease,
        gap .3s ease;

}

.project-card__link svg{

    width:18px;

    height:18px;

    stroke-width:2;

    transition:transform .3s ease;

}

.project-card__link:hover{

    color:#D79B2B;

    gap:14px;

}

.project-card__link:hover svg{

    transform:translateX(3px);

}

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

.featured-project__card{

    position:absolute;

    left:52px;

    bottom:0;

    width:370px;

    padding:30px;

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

    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);

    border:1px solid rgba(255,255,255,.75);

    border-radius:20px;

    box-shadow:
        0 22px 55px rgba(15,46,99,.13),
        0 2px 10px rgba(0,0,0,.04);

    z-index:5;

}

.featured-project__card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:22px;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,.45),
        rgba(255,255,255,0)
    );

    pointer-events:none;

}

.featured-project__card h3{

    margin:0;

    font-size:1.8rem;

    font-weight:700;

    line-height:1.2;

    color:#111827;

}

.featured-project__location{

    margin:0 0 14px;

    font-size:.95rem;

    font-weight:500;

    color:#4B5563;

}

.featured-project__location{

    display:flex;

    align-items:center;

    gap:8px;

}

.featured-project__location svg{

    width:16px;
    height:16px;

}

.featured-project__description{

    margin:0 0 22px;

    font-size:.95rem;

    line-height:1.65;

    color:#6B7280;

}

.featured-project__link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:2px;

    padding:0;

    font-family:inherit;

    font-size:.95rem;

    font-weight:700;

    line-height:1;

    color:#0F2E63;

    text-decoration:none;

    transition:
        color .3s ease,
        gap .3s ease;

}

.featured-project__link svg{

    width:18px;

    height:18px;

    stroke-width:2;

    transition:transform .3s ease;

}

.featured-project__link:hover{

    color:#D79B2B;

    gap:14px;

}

.featured-project__link:hover svg{

    transform:translateX(3px);

}
/* ==========================================================
   NAVIGATION
========================================================== */

.featured-projects__navigation{

    margin-top:40px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:24px;

}

.featured-prev,
.featured-next{

    width:52px;
    height:52px;

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

    background:#fff;

    border:1px solid rgba(15,46,99,.08);

    border-radius:50%;

    cursor:pointer;

    transition:.3s ease;

    box-shadow:
        0 8px 24px rgba(15,46,99,.08);

}

.featured-prev:hover,
.featured-next:hover{

    background:#0F2E63;

    border-color:#0F2E63;

}

.featured-prev:hover svg,
.featured-next:hover svg{

    color:#fff;

}

.featured-prev svg,
.featured-next svg{

    width:20px;
    height:20px;

    color:#0F2E63;

    transition:.3s ease;

}

/* ==========================================================
   PAGINATION
========================================================== */

.featured-projects .swiper-pagination{

    position:relative;

    bottom:auto;

    width:auto;

}

.featured-projects .swiper-pagination-bullet{

    width:10px;
    height:10px;

    margin:0 6px !important;

    background:#D8D8D8;

    opacity:1;

    transition:.3s ease;

}

.featured-projects .swiper-pagination-bullet-active{

    width:30px;

    border-radius:999px;

    background:#0F2E63;

}

/* ==========================================================
   LUXURY INTERACTIONS
========================================================== */

.featured-project{
    transition:.45s ease;
}

.featured-project:hover .featured-project__image img{
    transform:scale(1.05);
}

.featured-project:hover .featured-project__card{

    transform:translateY(-8px);

    box-shadow:
        0 34px 80px rgba(15,46,99,.16),
        0 4px 18px rgba(0,0,0,.06);

}

.featured-project__card{

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

}

.featured-project__approval{

    transition:.35s ease;

}

.featured-project:hover .featured-project__approval{

    transform:scale(1.05);

}

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

@media (max-width:1200px){

    .featured-project__card{

        width:380px;

        left:40px;

        padding:30px;

    }

}

@media (max-width:991px){

    .featured-project{

        padding-bottom:0;

    }

    .featured-project__card{

        position:relative;

        left:auto;
        bottom:auto;

        width:100%;

        margin:-50px auto 0;

        border-radius:20px;

    }

    .featured-project__image{

        border-radius:20px;

    }

    .featured-project__approval{

        width:78px;

        top:18px;
        right:18px;

    }

}

/* =========================================
   FEATURED PROJECTS — SWIPER NAVIGATION
   ========================================= */

.featured-projects__navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 42px;
    position: relative;
    z-index: 20;
}

.featured-prev,
.featured-next {
    width: 54px;
    height: 54px;

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

    border: 1px solid rgba(15, 46, 99, 0.12);
    border-radius: 50%;

    background: #ffffff;
    color: #0f2e63;

    cursor: pointer;

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

.featured-prev:hover,
.featured-next:hover {
    background: #0f2e63;
    color: #ffffff;
    border-color: #0f2e63;

    transform: translateY(-2px);

    box-shadow: 0 10px 24px rgba(15, 46, 99, 0.16);
}

.featured-prev svg,
.featured-next svg {
    width: 21px;
    height: 21px;
    stroke-width: 1.8;
}

/* Disabled arrow */

.featured-prev.featured-nav--disabled,
.featured-next.featured-nav--disabled {
    background: #ffffff;
    color: #b8bec8;
    border-color: rgba(15, 46, 99, 0.08);

    cursor: default;

    opacity: 0.55;

    transform: none;

    box-shadow: none;
}

.featured-prev.featured-nav--disabled:hover,
.featured-next.featured-nav--disabled:hover {
    background: #ffffff;
    color: #b8bec8;
    border-color: rgba(15, 46, 99, 0.08);

    transform: none;

    box-shadow: none;
}


/* Pagination */

.featured-projects__navigation .swiper-pagination {
    position: static;

    width: auto !important;

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

    gap: 8px;
}

.featured-projects__navigation .swiper-pagination-bullet {
    width: 8px;
    height: 8px;

    margin: 0 !important;

    background: #cbd0d8;

    opacity: 1;

    transition:
        width 0.25s ease,
        background-color 0.25s ease;
}

.featured-projects__navigation .swiper-pagination-bullet-active {
    width: 28px;

    border-radius: 10px;

    background: #0f2e63;
}


/* Mobile */

@media (max-width: 768px) {

    .featured-projects__navigation {
        margin-top: 34px;
        gap: 14px;
    }

    .featured-prev,
    .featured-next {
        width: 48px;
        height: 48px;
    }

    .featured-prev svg,
    .featured-next svg {
        width: 19px;
        height: 19px;
    }

}

@media (max-width:768px){

    .featured-projects{

        padding:80px 0;

    }

    .featured-projects .section-header{

        margin-bottom:45px;

    }

    .featured-projects .section-header__title{

        font-size:2.2rem;

    }

    .featured-project__card{

    position:relative;

    left:auto;
    bottom:auto;

    width:calc(100% - 32px);

    max-width:560px;

    margin:-55px auto 0;

    padding:26px 24px;

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

    border-radius:18px;

    box-shadow:
        0 18px 45px rgba(15,46,99,.12),
        0 2px 10px rgba(0,0,0,.04);

    z-index:5;

}

.project-card__header{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:12px;

}

.project-card__title{

    font-size:1.55rem;

}

.project-badge{

    align-self:flex-start;

}

.project-card__location{

    margin-top:4px;

    font-size:.9rem;

}

.project-card__description{

    font-size:.92rem;

    line-height:1.6;

}

.project-card__link{

    font-size:.92rem;

}

    .featured-projects__navigation{

        gap:18px;

        margin-top:28px;

    }

    .featured-prev,
    .featured-next{

        width:46px;
        height:46px;

    }

}

@media (max-width:576px){

    .featured-project__card{

        margin-top:-35px;

        border-radius:18px;

    }

    .featured-project__approval{

        width:66px;

        top:14px;
        right:14px;

    }

}