/* Popular projects slider - matches screenshot, responsive */
.pp-section { padding: 40px 0; background: #fff; }
.pp-section .pp-container { max-width: 1140px; margin: 0 auto; padding: 0 16px; }

.pp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}
.pp-title { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.2; color: #14224f; }
.pp-seeall { font-size: 15px; font-weight: 600; color: #1a6fe0; text-decoration: none; white-space: nowrap; }
.pp-seeall:hover { text-decoration: underline; }

/* Slider */
.pp-slider { position: relative; }
.pp-swiper { overflow: hidden; }
.pp-swiper .swiper-slide { height: auto; min-width: 0; }

.pp-card { display: block; text-decoration: none; color: inherit; }
.pp-thumb {
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    overflow: hidden;
    background: #e9edf5;
}
.pp-thumb img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .35s ease;
}
.pp-card:hover .pp-thumb img { transform: scale(1.05); }

.pp-name { margin: 12px 0 4px; font-size: 16px; font-weight: 600; color: #14224f; line-height: 1.3; }
.pp-line {
    margin: 0; font-size: 14px; line-height: 1.5; color: #2f3b5e;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Arrows */
.pp-nav {
    position: absolute;
    top: 90px;
    transform: translateY(-50%);
    z-index: 5;
    width: 40px; height: 40px;
    border: 0; border-radius: 50%;
    background: #fff; color: #14224f;
    box-shadow: 0 2px 10px rgba(20, 34, 79, .25);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: opacity .2s, background .2s;
}
.pp-nav:hover { background: #f1f4fb; }
.pp-prev { left: -14px; }
.pp-next { right: -14px; }
.pp-nav.swiper-button-disabled { opacity: 0; pointer-events: none; }

@media (max-width: 991px) {
    .pp-title { font-size: 24px; }
    .pp-prev { left: 4px; }
    .pp-next { right: 4px; }
}

/* Mobile: swipe only, no arrows */
@media (max-width: 575px) {
    .pp-section { padding: 28px 0; }
    .pp-title { font-size: 21px; }
    .pp-seeall { font-size: 14px; }
    .pp-head { margin-bottom: 18px; }
    .pp-nav { display: none; }
}