/* HERO */
.portfolio-hero {
    padding: 140px 60px;
    background:
        radial-gradient(circle at top right, rgba(255,122,24,.18), transparent 45%),
        linear-gradient(135deg, #10263f, #0b1c2d);
    color: #fff;
    text-align: center;
}

.hero-inner {
    max-width: 900px;
    margin: auto;
    animation: fadeUp 1s ease forwards;
}

.portfolio-hero h1 {
    font-size: 46px;
    margin-bottom: 14px;
}

.portfolio-hero p {
    font-size: 18px;
    opacity: .9;
}

/* ITEM */
.portfolio-item {
    padding: 110px 60px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 70px;
    align-items: center;
    background: #fff;
}

.portfolio-item:nth-child(even) {
    background: #f7f9fc;
}

.portfolio-item.reverse {
    direction: rtl;
}
.portfolio-item.reverse > * {
    direction: ltr;
}

/* IMAGE */
.portfolio-media img {
    width: 100%;
    border-radius: 26px;
    box-shadow: 0 30px 70px rgba(11,28,45,.25);
}

.portfolio-media.grayscale img {
    filter: grayscale(100%);
    transition: .45s ease;
}

.portfolio-media.grayscale img:hover {
    filter: grayscale(0%);
}

/* CONTENT */
.portfolio-content h2 {
    font-size: 34px;
    margin-bottom: 18px;
    color: #0b1c2d;
}

.portfolio-content p {
    line-height: 1.85;
    color: #555;
    margin-bottom: 28px;
}

/* BENEFIT */
.benefit-box {
    background: #ffffff;
    border-radius: 18px;
    padding: 28px 30px;
    box-shadow: 0 14px 34px rgba(11,28,45,.08);
    border-left: 4px solid #ff7a18;
}

.benefit-box h4 {
    color: #0b1c2d;
    margin-bottom: 14px;
    font-weight: 700;
}

.benefit-box ul {
    list-style: none;
    padding: 0;
}

.benefit-box li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
    font-size: 14.6px;
    color: #444;
}

.benefit-box li::before {
    content: "";
    width: 8px;
    height: 8px;
    background: #ff7a18;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 8px;
}

/* ANIMATION */
@keyframes fadeUp {
    from {opacity:0; transform:translateY(20px);}
    to {opacity:1; transform:none;}
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .portfolio-item {
        grid-template-columns: 1fr;
        padding: 80px 26px;
    }
}