/* ===========================================
   FEATURED PROJECT SECTION  (common / reusable)
   =========================================== */

/* ── Home page fp grid ── */
.fp-section-title { color: var(--Foreground); }
.fp-rule-h { background: rgba(0, 129, 255, 0.4); border: none; }
.fp-rule-v { background: rgba(0, 129, 255, 0.4); margin: 0 auto; }
.fp-posts-divider { background: rgba(0, 129, 255, 0.4); }
.fp-card-overlay { background: linear-gradient(180deg, rgba(0,21,55,0) 0%, rgba(0,21,55,0.9) 100%); top: 0; left: 0; right: 0; bottom: 0; justify-content: space-between; }
.fp-card-tags > li { padding: 3px 8px; color: var(--Foreground); }
.fp-card-title { letter-spacing: -0.64px; margin-bottom: 0; transition: var(--b-transition); }
a.fp-card:hover .fp-card-title { color: var(--Secondary); }
.fp-card-content { gap: 16px; }
.fp-card-body { gap: 8px; }
.fp-card-desc { opacity: 0.6; }
.fp-card-rule { background: var(--White); opacity: 0.2; }
.fp-card-footer { gap: 8px; }
.fp-card-category {transition: var(--b-transition); background: rgba(0, 129, 255, 0.25); color: var(--Secondary); padding: 3px 8px; }
.fp-card-category:hover { background: var(--Secondary); color: var(--White); }

.fp-card-location {color: var(--White-65); width: fit-content; flex: 0 0 auto;}
.fp-card-arrow { color: var(--White); font-size: 20px; width: fit-content; transition: var(--b-transition); margin-left: auto;}
.fp-card-arrow a{color: var(--White);}
.fp-card-arrow a:hover{color: var(--Secondary);}
a.fp-card:hover .fp-card-arrow { color: var(--Secondary); }
.fp-tile-overlay {transition: var(--b-transition-4); background: linear-gradient(0deg, rgba(0,44,79,0.75) 0%, rgba(0,44,79,0) 80%); top: 0; left: 0; right: 0; bottom: 0; width: 100%; justify-content: flex-end; }
h3.fp-tile-title { margin-bottom: 0; transition: var(--b-transition); }
a.fp-tile:hover h3.fp-tile-title { color: var(--Secondary); }
.fp-tile-content { gap: 8px; }
.fp-tile-footer { gap: 8px; }
.fp-tile-category { background: var(--Foreground); color: var(--Secondary); padding: 3px 8px; }
.fp-tile-category:hover { background: var(--Secondary); color: var(--White); }

.fp-tile-linlk{width: 80px; height: 80px; transform: rotate(-45deg);  color: var(--Secondary);}
.fp-tile picture img, .fp-tile-linlk i{transition: var(--b-transition);}
.fp-tile-linlk i{transform: translateX(0px);}
/* .fp-tile-linlk:hover i{transform: translateX(4px);} */

.fp-tile-hover{opacity: 0; visibility: hidden; transition: var(--b-transition);}



.fp-tile-location { color: var(--White-65); white-space: nowrap; width: fit-content; flex: 0;}
.fp-sectors-rule { background: rgba(0, 129, 255, 0.4); }
.fp-sector-link { justify-content: space-between; color: var(--Foreground); }
.fp-sector-label { letter-spacing: 1.4px; }
.fp-sector-link i { color: var(--Secondary); font-size: 20px; }
.fp-sector-link img{max-width: 20px; max-height: 20px; object-fit: contain;}
ul.fp-sectors-list > li.fp-sector-divider { background: rgba(0, 129, 255, 0.4); }

/* ── Mobile Slider Controls ── */
.fp-posts-swiper-arrow { cursor: pointer; color: var(--Secondary); transition: var(--b-transition); }
.fp-posts-swiper-arrow:hover { color: var(--Primary); }
.fp-posts-swiper-prev { margin-right: auto; margin-left: -20px; }
.fp-posts-swiper-next { margin-left: auto; margin-right: -20px; }
.fp-posts-swiper-controls { gap: 16px; margin-top: 16px; }
.fp-posts-swiper-pagination { text-align: center; flex: 1; position: static; }
.fp-posts-swiper-pagination .swiper-pagination-bullet { width: 12px; height: 12px; background: rgba(0, 129, 255, 0.16); opacity: 1; border-radius: 50%; }
.fp-posts-swiper-pagination .swiper-pagination-bullet-active { background: var(--Tertiary); box-shadow: 0 0 0 4px rgba(0, 129, 255, 0.16); }

.fp-header{ justify-content: space-between; }
.fp-section-heading{flex: 1; }

@media only screen and (min-width: 1024px) {
    .fp-wrap { padding: 80px 0; }
    .fp-header { gap: 30px; padding-bottom: 40px; border-bottom: 1px solid rgba(0, 129, 255, 0.4); }
    .fp-header-btn { width: fit-content; margin-left: auto;}
    .fp-rule-h { }
    .fp-rule-v { width: 1px; min-height: 64px; }
    .fp-card-overlay { padding: 32px; }
    .fp-card-rule { min-height: 1px; }
    .fp-posts .fp-swiper-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr 48px 1fr 1fr; gap: 40px; position: relative; }
    .fp-posts .swiper-wrapper.fp-swiper-grid::after { content: ""; display: block; width: 1px; min-height: 100%; position: absolute; left: 50%; transform: translateX(-50%); background-color: var(--Subtle-2); }
    .fp-posts .fp-swiper-grid-slide:first-child { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; }
    .fp-posts .fp-swiper-grid-slide:nth-child(2) { grid-column: 4; grid-row: 1; }
    .fp-posts .fp-swiper-grid-slide:nth-child(3) { grid-column: 5; grid-row: 1; }
    .fp-posts .fp-swiper-grid-slide:nth-child(4) { grid-column: 4; grid-row: 2; }
    .fp-posts .fp-swiper-grid-slide:nth-child(5) { grid-column: 5; grid-row: 2; }
    .fp-tile { min-height: 248px; width: 100%; height: 100%; }
    .fp-tile-overlay { padding: 16px; }
    ul.fp-sectors-list > li.fp-sector { flex: 1; }
    ul.fp-sectors-list > li.fp-sector-divider { width: 1px; align-self: stretch; }
    .fp-sector-link { padding: 16px 20px; border: 1px solid var(--Subtle-2); border-right: none;}
    .fp-sector:first-child .fp-sector-link{border-left: none;}
    .fp-sectors-rule { min-height: 1px; }

    .fp-tile:hover .fp-tile-linlk{transform: rotate(0deg);}
    .fp-tile:hover .fp-tile-hover{opacity: 1; visibility: visible;}
    .fp-tile:hover .fp-tile-overlay{opacity: 0; visibility: visible;}
    .fp-tile:hover picture img{filter: grayscale(100%); transform: scale(1.15);}
}

@media only screen and (min-width: 1024px) {
    .fp-sector-link { padding: 16px 14px; }
    .fp-sector-label { letter-spacing: 0.8px; font-size: 13px; }
}

.featured-project-eyebrow{color: var(--Foreground); letter-spacing: 1.2px; line-height: 12px; margin-bottom: 24px; }
.featured-project-heading{color: var(--Primary); line-height: 120%; margin-bottom: 24px; font-weight: 400; font-size: 32px; }
.featured-project-content hr{margin-bottom: 24px; background: var(--Tertiary);}
.featured-project-description{color: var(--Body-text); margin-bottom: 24px; }

/* ── Decorative elements (ring + dots) ── */
/* .fp-deco-ring{background: linear-gradient(180deg, rgba(0, 129, 255, 0.25) 0%, rgba(0, 129, 255, 0.10) 100%);} */
.fp-dot-1 { width: 48px; height: 48px; right: -24px; top: 50%; transform: translateY(-50%); z-index: 2;  background: var(--Tertiary); opacity: 0.2; }
.fp-dot-2 { width: 24px; height: 24px; right: -12px; top: 50%; transform: translateY(-50%); z-index: 2; background: var(--Tertiary);}

.featured-project-content{background: linear-gradient(90deg, rgba(0, 129, 255, 0.10) 0%, rgba(0, 129, 255, 0.00) 100%); position: relative;}
.featured-project-content::before{content: ""; position: absolute; top: 0; left: -240px; width: 240px; height: 100%; background: linear-gradient(180deg, rgba(0, 129, 255, 0.25) 0%, rgba(0, 129, 255, 0.10) 100%); border-radius: 300px 0 0 300px; z-index: 1; }

.featured-project-reverse{flex-direction: row-reverse;}
.featured-project-reverse .featured-project-content{background: linear-gradient(-90deg, rgba(0, 129, 255, 0.10) 0%, rgba(0, 129, 255, 0.00) 100%);}
.featured-project-reverse .featured-project-content::before{left: auto; right: -240px; border-radius: 0 300px 300px 0;}

.featured-project-green .featured-project-heading{color: var(--Secondary-2);}
.featured-project-green .fp-dot-1{background: var(--Secondary-2); opacity: 0.2;}
.featured-project-green .fp-dot-2{background: var(--Secondary-2);}
.featured-project-green .featured-project-content hr{background: var(--Secondary-2);}
.featured-project-green .featured-project-content .button{background: var(--Secondary); color: var(--White); }
.featured-project-green .featured-project-content .button:hover{background-color: var(--Primary);}
.featured-project-green .featured-project-content{background: linear-gradient(270deg, rgba(84, 185, 72, 0.10) 0%, rgba(84, 185, 72, 0.00) 100%);}
.featured-project-green .featured-project-content::before{background: linear-gradient(180deg, rgba(84, 185, 72, 0.30) 0%, rgba(84, 185, 72, 0.10) 100%);}

/* ── Responsive ── */
@media only screen and (min-width: 1024px) {
    .featured-project-main { padding: 80px 0; align-items: center; }
    /* Outer wrap: flex width only — height derived from fp-img-circle */
    .featured-project-image-wrap{flex: 0 0 480px; }
    /* Circular image */
    .fp-img-circle { width: 480px; height: 480px; }
    /* Decorative ring: slightly larger, offset rightward so it peeks into the gap */
    .fp-deco-ring { width: 240px; height: 100%; top: 0; right: 0; z-index: 2; border-radius: 300px 0 0 300px; }
    /* Dots clustered bottom-right of circle */
     .fp-dot-1 { width: 48px; height: 48px; right: -24px; top: 50%; transform: translateY(-50%); z-index: 2; }
    .fp-dot-2 { width: 24px; height: 24px; right: -12px; top: 50%; transform: translateY(-50%); z-index: 2;}
    .featured-project-content{flex: 1; padding: 56px 0 56px 80px; min-height: 480px;}
    .featured-project-heading { font-size: 36px; }

    .featured-project-reverse .featured-project-content{padding: 56px 80px 56px 0;}
    .featured-project-reverse .fp-dot-1 {left: -24px; right: auto;}
    .featured-project-reverse .fp-dot-2 {left: -12px; right: auto;}
}

@media only screen and (max-width: 1023px) and (min-width: 768px) {
    .fp-wrap{padding: 64px 0; }
    .featured-project-main { padding: 40px 0; gap: 40px; align-items: center; }
    .featured-project-image-wrap { flex: 0 0 300px; }
    .fp-img-circle { width: 300px; height: 300px; }
    .fp-deco-ring { width: 330px; height: 330px; top: -15px; right: -40px; }
    .fp-dot-1 { width: 12px; height: 12px; bottom: 36px; right: -14px; }
    .fp-dot-2 { width: 8px; height: 8px; bottom: 20px; right: 4px; }
    .featured-project-content { flex: 1; gap: 16px; }
    .featured-project-heading { font-size: 28px; }

    .fp-header{margin-bottom: 40px;}
    .fp-posts{margin-bottom: 40px;}
    .fp-swiper-grid{width: 100%; flex-wrap: wrap; gap: 24px; }
    .fp-swiper-grid-slide:first-child{width: 100%; margin-bottom: 16px; }
    .fp-swiper-grid-slide{width: calc(50% - 12px);}
    .fp-card-overlay, .fp-tile-overlay{padding: 28px;}
    .fp-card-rule{min-height: 1px; }
    .fp-sectors-rule{min-height: 1px; }
    .fp-sector-link{padding: 16px 20px; }
    .fp-sectors-list{border: 1px solid var(--Subtle-2); border-right: none; border-left: none;}
    .fp-sector{width: calc(33.333% - 0px); flex-grow: 1; }
    .fp-sector-link{padding: 16px 20px; border-right: 1px solid var(--Subtle-2); border-top: 1px solid var(--Subtle-2);}
    .fp-sector:last-child .fp-sector-link{border-right: none;}
    ul.fp-sectors-list > li.fp-sector:nth-child(-n+3) .fp-sector-link{border-top: none; }
    .fp-header-btn:not(.hide-mobile){display: none;}
}

@media only screen and (max-width: 767px) and (min-width: 0px) {
    .fp-wrap{padding: 56px 0; }
    .featured-project-main{padding: 52px 0; flex-direction: column;}
    .fp-header{width: 100%; margin-bottom: 24px; display: block; text-align: center;}
    .fp-section-title{color: var(--Foreground); font-size: 22px; line-height: 26px; letter-spacing: normal; }
    .featured-project-image-wrap{width: 100%;}
    .fp-img-circle { width:100%; height: auto; }
    .fp-deco-ring { width: 310px; height: 310px; top: -15px; right: -20px; }
    .fp-dot-1{right: auto; top: auto; transform: translateX(-50%); bottom: -24px; left: 50%; }
    .fp-dot-2{right: auto; top: auto; transform: translateX(-50%); left: 50%; bottom: -12px; }
    .featured-project-content{width: 100%; gap: 0; padding: 26px 26px 0; background: linear-gradient(180deg, rgba(0, 129, 255, 0.10) 0%, rgba(0, 129, 255, 0.00) 100%);}
    .featured-project-content::before{top: -169px; left: 0; width: 100%; height: 169px; border-radius: 300px 300px 0 0; background: linear-gradient(180deg, rgba(0, 129, 255, 0.25) 0%, rgba(0, 129, 255, 0.10) 100%); }
    .featured-project-eyebrow{margin-bottom: 20px;}
    .featured-project-heading{font-size: 24px; margin-bottom: 20px; }
    .featured-project-content hr{margin-bottom: 20px;}
    .featured-project-description{margin-bottom: 20px; }
    .featured-project-content .button { width: 100%; text-align: center; }

    .featured-project-reverse .featured-project-content::before{left: 0; right: auto; border-radius: 300px 300px 0 0; }
    .featured-project-green .featured-project-content{background: linear-gradient(180deg, rgba(84, 185, 72, 0.10) 0%, rgba(84, 185, 72, 0.00) 100%);}
    .featured-project-green .featured-project-content::before{background: linear-gradient(180deg, rgba(84, 185, 72, 0.30) 0%, rgba(84, 185, 72, 0.10) 100%);}

    .fp-card-overlay, .fp-tile-overlay{justify-content: flex-end; padding: 16px;}
    .fp-card-content{gap: 8px; }
    .fp-card-title, .fp-tile-title{font-size: 18px; line-height: 21px; letter-spacing: normal;}

    h3.fp-tile-title { margin-bottom: 0; transition: var(--b-transition); font-size: 18px; line-height: 21px; }

    .fp-sectors{margin-bottom: 24px; }
    .fp-sectors-list{gap: 12px; justify-content: center;}
    .fp-sector{flex: 0 0 58px; height: 58px; border-radius: 50%; border: 1px solid rgba(0, 129, 255, 0.50); justify-content: center;}
    ul.fp-sectors-list > li.fp-sector-divider{display: none;}
    .fp-sector-link{justify-content: center;}
    .fp-posts-swiper-controls{gap: 16px; margin: 24px 0; }
    .fp-posts-swiper .swiper-wrapper { align-items: center; }
    .fp-posts-swiper .swiper-slide { width: 330px; transform: scale(0.903); transition: transform 0.4s ease; }
    .fp-posts-swiper .swiper-slide-active { transform: scale(1); }

    .fp-card picture img{min-height: 297px;}
    .fp-tile picture img{min-height: 297px;}
}