.project-layout {

    display: grid;

    grid-template-columns:1fr 320px;

    gap: 40px;

    align-items: start;

}

@media (max-width: 992px) {

    .project-layout {

        grid-template-columns:1fr;

    }

    .project-sidebar {

        position: static;

    }

}

.project-sidebar {

    position: sticky;
    top: 30px;

    display: flex;
    flex-direction: column;
    gap: 25px;

}

.sidebar-box {

    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 25px;

}

.sidebar-box h3 {

    margin-bottom: 15px;

}

.sidebar-box p {

    color: #666;
    line-height: 2;

}

.sidebar-btn {

    display: block;
    text-align: center;
    padding: 14px;
    border-radius: 8px;
    background: #0B8B45;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    margin-top: 20px;

}

.sidebar-box .btn-call {

    background: #0B8B45;

    color: #fff;

}

.sidebar-box .btn-whatsapp {

    background: #25D366;

    color: #fff;

}

.sidebar-box .btn-catalog {

    background: #f4f4f4;

    color: #333;

}

.sidebar-features {

    margin: 0;

    padding-right: 18px;

}

.sidebar-features li {

    margin-bottom: 12px;

    line-height: 1.9;

}

.sidebar-products {

    display: flex;

    flex-direction: column;

    gap: 15px;

}

.sidebar-product {

    display: flex;

    gap: 10px;

    align-items: center;

    text-decoration: none;

    color: #333;

}

.sidebar-product img {

    width: 65px;

    height: 65px;

    object-fit: cover;

    border-radius: 8px;

    border: 1px solid #eee;

}

.sidebar-product span {

    font-size: 14px;

    line-height: 1.8;

}

.project-summary ul {

    list-style: none;

    margin: 0;

    padding: 0;

}

.project-summary li {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 12px 0;

    border-bottom: 1px solid #efefef;

    gap: 15px;

}

.project-summary li:last-child {

    border-bottom: none;

}

.project-summary span {

    color: #666;

    font-size: 14px;

}

.project-summary strong {

    color: #222;

    font-size: 14px;

    font-weight: 700;

}

.project-video {

    margin: 40px auto;

}

.project-video video{

    width:100%;
    display:block;
    border-radius:14px;

}

.project-video.ratio-16-9{

    max-width:1000px;

}

.project-video.ratio-9-16{

    max-width:420px;

}

.project-video.ratio-1-1{

    max-width:650px;

}



.project-cta {

    margin: 60px 0;

}

.project-cta-box {

    background: #f5f9f6;

    border: 1px solid #d7e8dc;

    border-radius: 18px;

    padding: 40px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 40px;

}

.project-cta-content {

    flex: 1;

}

.project-cta-label {
    display: inline-block;
    margin-bottom: 15px;
    background: #0b8b4524;
    padding: 8px 18px;
    border-radius: 30px;
}

.project-cta-content h2 {

    margin-bottom: 15px;

    font-size: 24px;

}

.project-cta-content p {

    line-height: 2;

    color: #666;

}

.project-cta-buttons {

    width: 260px;

    display: flex;

    flex-direction: column;

    gap: 15px;

}

.project-cta-buttons a {

    text-align: center;

    padding: 15px;

    border-radius: 10px;

    text-decoration: none;

    font-weight: bold;

}

.project-cta .btn-call {

    background: #0B8B45;

    color: #fff;

    border: 2px solid #0B8B45;

    transition: background 0.25s, color 0.25s;

}

.project-cta .btn-call:hover {

    background: #fff;

    color: #0B8B45;

}

.project-cta .btn-whatsapp {

    background: #25D366;

    color: #fff;

    border: 2px solid #25D366;

    transition: background 0.25s, color 0.25s;

}

.project-cta .btn-whatsapp:hover {

    background: #fff;

    color: #25D366;

}

.project-cta .btn-request {

    border: 2px solid #0B8B45;

    color: #0B8B45;

    transition: background 0.25s, color 0.25s;

}

.project-cta .btn-request:hover {

    background: #0B8B45;

    color: #fff;

}

.project-gallery {

    margin: 70px 0;

}

.project-gallery .before-after-row {

    display: grid;

    grid-template-columns:repeat(2, 1fr);

    gap: 25px;

    margin-bottom: 35px;

}

.project-gallery .before-item,
.project-gallery .after-item {

    position: relative;

}

.project-gallery .before-item span,
.project-gallery .after-item span {

    position: absolute;

    top: 15px;

    right: 15px;

    background: #0B8B45;

    color: #fff;

    padding: 8px 18px;

    border-radius: 20px;

    z-index: 5;

}

.project-gallery .before-item img,
.project-gallery .after-item img {

    width: 100%;

    border-radius: 12px;

    display: block;

}

.project-products {

    display: flex;

    gap: 8px;

    flex-wrap: wrap;

    margin: 18px 0;

}

.project-products span {

    background: #f4f4f4;

    border-radius: 20px;

    padding: 5px 12px;

    font-size: 12px;

}