.back-button {

    display:inline-block;
    margin:30px 0;

    padding:12px 25px;

    background:#f2f2f2;

    color:#333;

    text-decoration:none;

    border-radius:30px;

    transition:.3s;

}


.back-button:hover {

    background:#333;

    color:white;

}

.work-title{

    font-size:40px;

    line-height:1.2;

    margin-bottom:15px;

    overflow-wrap:break-word;

}

.work-info{

    display:grid;

    grid-template-columns:340px 1fr;

    gap:40px;

    margin-bottom:70px;

    align-items:start;

}

.work-sidebar{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.feature-card{

    display:flex;

    align-items:center;

    gap:18px;

    padding:22px;

    background:#fff;

    border-radius:18px;

    box-shadow:0 10px 30px rgba(0,0,0,.06);

    transition:
        transform .3s,
        box-shadow .3s;

}

.feature-card:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(0,0,0,.10);

}

.feature-icon{

    width:54px;

    flex-shrink:0;

    text-align:center;

    font-size:32px;

}

.feature-label{

    color:#888;

    font-size:14px;

    margin-bottom:4px;

}

.feature-value{

    font-size:24px;

    font-weight:700;

    color:#222;

}

.work-description{

    background:#fff;

    border-radius:20px;

    padding:35px;

    box-shadow:0 10px 30px rgba(0,0,0,.06);

}

.work-description a {
    color: #b8860b;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: opacity 0.2s ease;
}

.work-description a:hover {
    opacity: 0.7;
}



.work-description h2{

    margin-bottom:20px;
    font-size:34px;

}

.work-description p{

    font-size:18px;

    line-height:1.8;

    color:#555;

    overflow-wrap: anywhere;

}

.work-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-top:0;

    margin-bottom:20px;

}

.work-buttons a{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    height:52px;

    border-radius:12px;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

    transition:
    transform .3s ease,
    background .3s ease;

}


.work-buttons a:hover{

    transform:translateY(-3px);

}

.whatsapp-button{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:14px 26px;

    border-radius:12px;

    background:#25D366;

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.whatsapp-button:hover{

    background:#1da851;

}

.telegram-button{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:14px 26px;

    border-radius:12px;

    background:#229ED9;

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.telegram-button:hover{

    background:#1b89bc;

}

.call-button{

display:flex;

justify-content:center;

align-items:center;

background:#333;

color:#fff;

}

.gallery-section{

    margin-top:0px;

    margin-bottom:70px;

}

.work-gallery{

    width:100%;

    max-width:1200px;

    margin:auto;

}

.main-photo img{

    width:100%;
    display: block;
    height:auto;
    max-height:750px;
    margin-bottom:20px;
    object-fit:cover;

    border-radius:20px;

    cursor:pointer;

    box-shadow:0 15px 40px rgba(0,0,0,.12);

    transition:
        opacity .25s ease,
        transform .25s ease;

}

.main-photo img:hover{

    transform:scale(1.02);

}

.main-photo img.fade{

    opacity:0;

}

/* ==========================================
   Thumbs
========================================== */
.thumbs{

    display:flex;

    gap:15px;

    margin-top:20px;

    justify-content:center;

    flex-wrap:wrap;

    margin-bottom:70px;

}


.thumbs img {

width:120px;
height:100px;
object-fit:cover;
border-radius:15px;

}

.thumb{

    cursor:pointer;

    opacity:.7;

    border:2px solid transparent;

    transition:.3s;

}

.thumb:hover{

    opacity:1;

}

.thumb.active{

    opacity:1;

    border-color:#c99500;

}

/* ==========================================
   Lightbox
========================================== */

.lightbox {
    position: fixed;
    inset: 0;

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

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .3s ease,
        visibility .3s ease;

    background: rgba(0,0,0,.9);

    z-index: 9999;
}

.lightbox-content {
    position: relative;

    display: inline-flex;

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

    max-width: 90vw;
    max-height: 90vh;
}

.lightbox.show {
    opacity: 1;
    visibility: visible;
}

.lightbox.show .lightbox-image {
    transform: scale(1);
}

.lightbox-image {
    display: block;

    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 12px;

    box-shadow: 0 20px 60px rgba(0,0,0,.5);

    transform: scale(.9);

    transition:
        opacity .3s ease,
        transform .3s ease;

    cursor: zoom-out;
}

.lightbox-close {
    position: absolute;

    top: 20px;
    right: 30px;

    color: #fff;

    font-size: 42px;

    cursor: pointer;
    user-select: none;

    transition:
        color .3s ease,
        transform .3s ease;
}

.lightbox-close:hover {
    color: #c99500;
    transform: rotate(90deg);
}

.lightbox-prev,
.lightbox-next {
    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    z-index: 2;

    width: 50px;
    height: 50px;

    display: flex;

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

    font-size: 42px;
    color: #fff;

    cursor: pointer;
    user-select: none;

    background: rgba(0,0,0,.35);

    border-radius: 50%;
}

.lightbox-prev {
    left: 15px;
}

.lightbox-next {
    right: 15px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    color: #c99500;
    transform: translateY(-50%) scale(1.15);
}




.lightbox-close{

    position:absolute;

    top:20px;

    right:30px;

    color:#fff;

    font-size:42px;

    cursor:pointer;

    user-select:none;

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

}

.lightbox-close:hover{

    color:#c99500;

    transform:rotate(90deg);

}

.lightbox-prev,
.lightbox-next {
    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    z-index: 2;

    width: 50px;
    height: 50px;

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

    font-size: 42px;
    color: #fff;

    cursor: pointer;
    user-select: none;

    background: rgba(0,0,0,.35);
    border-radius: 50%;
}

.lightbox-prev {
    left: 15px;
}

.lightbox-next {
    right: 15px;
}

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

    color:#c99500;

    transform:translateY(-50%) scale(1.15);

}

/* ==========================================
   Горизонтальный режим
========================================== */

@media (orientation: landscape) and (max-height: 600px) {

    .lightbox-content {
        max-width: 90vw;
        max-height: calc(100dvh - 30px);
    }

    .lightbox-image {
        max-width: 100%;
        max-height: calc(100dvh - 30px);
    }

    .main-photo img {
        height: 95vh;
        width: auto;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        object-fit: contain;
        border-radius: 20px;
    }
}

.mobile-contact-bar{

    display:none;

}


/* ==========================
   Breadcrumbs
========================== */

.breadcrumbs{
    display:flex;
    align-items:center;
    gap:10px;

    flex-wrap:wrap;

    margin:20px 0 35px;

    font-size:15px;
}

.breadcrumbs a{
    color:#777;
    text-decoration:none;
    transition:.3s;
}

.breadcrumbs a:hover{
    color:#b8860b;
}

.breadcrumbs span:last-child{
    color:#222;
    font-weight:600;
}

/* ===================================================
   1400px
=================================================== */

@media (max-width:1400px){

    .container{
        max-width:1200px;
    }

}


/* ===================================================
   1200px
=================================================== */

@media (max-width:1200px){

    .container{

        max-width:1000px;

        padding:0 20px;

    }

    .work-title{

        font-size:38px;

    }

    .work-info{

        grid-template-columns:280px 1fr;

        gap:30px;

    }

    .main-photo img{

        max-height:650px;

    }

}


/* ===================================================
   992px
=================================================== */

@media (max-width:992px){

    .work-info{

        grid-template-columns:1fr;

    }

    .work-sidebar{

        order:2;

    }

    .work-description{

        order:1;

    }

    .work-buttons{

        display:grid;

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

        gap:15px;

    }

    .work-buttons a{

        min-width:auto;

        margin-top:0;

    }

    .related-grid{

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

    }

}


/* ===================================================
   768px
=================================================== */

@media (max-width:768px){

    .work-title{

        font-size:32px;

    }

    .work-description{

        padding:25px;

    }

    .work-buttons{

        display:none;

    }

    .feature-card{

        padding:16px;

    }

    .thumbs{

        gap:10px;

    }

    .thumbs img{

        width:90px;

        height:75px;

    }

    .main-photo img{

        max-height:500px;

    }

    .breadcrumbs{

        font-size:14px;

    }

    
    .related-grid{

    grid-template-columns:1fr;

    }

    .related-works h2{

        font-size:30px;

    }

}


/* ===================================================
   576px
=================================================== */

@media (max-width:576px){

    .container{

        padding-left:16px;

        padding-right:16px;

    }
    .work-title{

        font-size:28px;

        line-height:1.25;

    }

    .back-button{

        width:100%;

        text-align:center;

    }

    .feature-card{

        padding:15px;

    }

    .feature-icon{

        font-size:28px;

    }

    .feature-value{

        font-size:18px;

    }

    .work-description{

        padding:20px;

    }

    .work-description p{

        font-size:16px;

    }

}


/* ===================================================
   420px
=================================================== */

@media (max-width:420px){

    .container{

        padding:0 15px;

    }

    .work-title{

        font-size:24px;

    }

    .thumbs{

        justify-content:flex-start;

        overflow-x:auto;

        flex-wrap:nowrap;

        padding-bottom:10px;

    }

    .thumbs img{

        flex:0 0 auto;

        width:80px;

        height:65px;

    }

    .feature-card{

        gap:12px;

    }

    .feature-icon{

        width:40px;

        font-size:24px;

    }

    .work-description{

        padding:18px;

    }

}

@media(max-width:768px){

    body{

        padding-bottom:70px;

    }    


    .mobile-contact-bar{

        position:fixed;

        bottom:0;
        left:0;

        width:100%;

        display:flex;

        z-index:9998;

        background:#fff;

        box-shadow:0 -5px 20px rgba(0,0,0,.15);

    }


    .mobile-contact-bar a{

        flex:1;

        height:60px;

        display:flex;

        align-items:center;

        justify-content:center;

        text-decoration:none;

        color:#fff;

        font-size:26px;

    }


    .mobile-contact-bar a:nth-child(1){

        background:#333;

    }


    .mobile-contact-bar a:nth-child(2){

        background:#25D366;

    }


    .mobile-contact-bar a:nth-child(3){

        background:#229ED9;

    }

}