/* work2.CSS */

.work-gallery{
    width:min(1100px,90%);
    margin:80px auto;
    display:flex;
    flex-direction:column;
    gap:35px;
}


/* ---- PACKAGING CARD — split media/info layout ---- */
.pkg-card{
    position:relative;
    display:grid;
    grid-template-columns: 1.2fr 1fr;
    background:#181818;
    border:1px solid rgba(255,255,255,.08);
    border-radius:26px;
    overflow:hidden;
    cursor:pointer;
    transition:border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.pkg-card.pkg-card-rev{
    grid-template-columns: 1fr 1.2fr;
}
.pkg-card.pkg-card-rev .pkg-media{ order: 2; }
.pkg-card.pkg-card-rev .pkg-info{ order: 1; }

.pkg-card:hover{
    transform:translateY(-6px);
    border-color:#F5C842;
    box-shadow:0 25px 60px rgba(0,0,0,.45);
}

.pkg-media{
    position:relative;
    background:#111;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:36px;
    min-height:420px;
    overflow:hidden;
}
.pkg-media img{
    max-width:100%;
    max-height:440px;
    width:auto;
    object-fit:contain;
    border-radius:14px;
    filter:drop-shadow(0 20px 40px rgba(0,0,0,.5));
    transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.pkg-card:hover .pkg-media img{
    transform:scale(1.04);
}
.pkg-info{
    position:relative;
    z-index:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:14px;
    padding:2.75rem 2.5rem;
    background: linear-gradient(160deg, #1c1c1c, #151515);
    overflow:hidden;
}
/* Ghost index number — a background flourish behind the panel content,
   not overlaid on the product photo (its size varies too much to reliably
   coexist with a fixed-position numeral without one hiding the other). */
.pkg-num{
    position:absolute;
    z-index:-1;
    top:-0.15em;
    inset-inline-end:-0.05em;
    font-family:'Syne', sans-serif;
    font-size:150px;
    font-weight:800;
    color:#F5C842;
    opacity:.08;
    line-height:1;
    letter-spacing:-4px;
    pointer-events:none;
}
.pkg-tag{
    display:inline-block;
    font-size:10px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:#F5C842;
    padding:6px 14px;
    border-radius:30px;
    border:1px solid rgba(245,200,66,.3);
    background:rgba(245,200,66,.08);
}
.pkg-title{
    font-family:'Syne', sans-serif;
    font-size:30px;
    font-weight:800;
    color:#F0F0F0;
    letter-spacing:-0.5px;
    line-height:1.1;
}
.pkg-desc{
    font-size:14.5px;
    color:#888;
    line-height:1.85;
    max-width:340px;
}
.pkg-cta{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:8px;
    font-size:13px;
    font-weight:600;
    color:#F0F0F0;
    transition:gap .25s ease, color .25s ease;
}
.pkg-cta-arrow{
    width:30px; height:30px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.15);
    color:#888;
    display:flex; align-items:center; justify-content:center;
    transition:all .25s ease;
    flex-shrink:0;
}
[dir="rtl"] .pkg-cta-arrow svg{ transform: scaleX(-1); }
.pkg-card:hover .pkg-cta{ color:#F5C842; gap:14px; }
.pkg-card:hover .pkg-cta-arrow{ border-color:#F5C842; color:#F5C842; background:rgba(245,200,66,.08); }

.page-hero {
  padding: 160px 0 6rem;
  text-align: center;
}

.page-title {
  font-size: 64px; font-weight: 800; color: var(--text);
  line-height: 1.05; letter-spacing: -2px;
  margin: 12px 0 18px;
}
.page-sub {
  font-size: 17px; color: var(--muted); line-height: 1.85;
  max-width: 500px; margin: 0 auto;
}

/* LIGHTBOX */

.lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.88);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:99999;
    padding:20px;
}


.lightbox.open{
    display:flex;
}



.lb-inner{
    width:min(1000px,95%);
    max-height:85vh;
    background:#121212;
    border-radius:30px;
    border:1px solid rgba(245,200,66,.25);
    padding:25px;
    overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,.6);
}

/* TITLE */

.package-preview h2{
    color:#F5C842;
    font-size:28px;
    font-weight:800;
    text-align:center;
    margin:0 0 20px;
}

.package-images{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    width:100%;
    overflow:hidden;
}

.package-images img{
    width:100%;
    height:230px;
    object-fit:contain;
    background:#181818;
    border-radius:18px;
    padding:10px;
    border:1px solid rgba(255,255,255,.06);
    transition:.3s ease;
    cursor: zoom-in;
}

.package-images img:hover{
    transform:scale(1.03);
    border-color:#F5C842;
}

/* IMAGE VIEWER (zoom) */
.img-viewer{
    position:fixed;
    inset:0;
    z-index:100001; /* above .lightbox (99999) and #lbClose (100000) */
    background:rgba(0,0,0,.92);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease;
}
.img-viewer.open{
    opacity:1;
    pointer-events:all;
}
.img-viewer img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    border-radius:12px;
    transform:scale(.96);
    transition:transform .25s cubic-bezier(.22,1,.36,1);
    background:#181818;
}
.img-viewer.open img{
    transform:scale(1);
}
.img-viewer-close{
    position:fixed;
    top:25px;
    right:35px;
    width:45px;
    height:45px;
    border-radius:50%;
    border:0;
    background:#F5C842;
    color:#111;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:100002;
}
.img-viewer-close:hover{
    background:#FFD96B;
}

@media(max-width:768px){
    .img-viewer{ padding:20px; }
}

/* CLOSE BUTTON */

#lbClose{
    position:fixed;
    top:25px;
    right:35px;

    width:45px;
    height:45px;

    border-radius:50%;
    border:0;

    background:#F5C842;
    color:#111;

    font-size:25px;
    cursor:pointer;

    z-index:100000;
}

/* STOP PAGE SCROLL */

body.popup-open{
    overflow:hidden;
}

/* RESPONSIVE */

@media(max-width:768px){

    .pkg-card,
    .pkg-card.pkg-card-rev{
        grid-template-columns: 1fr;
    }
    .pkg-card.pkg-card-rev .pkg-media{ order: 1; }
    .pkg-card.pkg-card-rev .pkg-info{ order: 2; }
    .pkg-media{
        min-height:260px;
        padding:24px;
    }
    .pkg-media img{ max-height:260px; }
    .pkg-info{
        padding:1.75rem 1.5rem 2rem;
    }
    .pkg-title{ font-size:24px; }
    .pkg-desc{ max-width:none; }

    .lb-inner{
        width:95%;
        padding:15px;
    }

    .package-images{
        grid-template-columns:1fr;
    }

    .package-images img{
        height:170px;
    }

    .page-hero{
        padding:100px 0 3.5rem;
    }

    .page-title{
        font-size:34px;
        letter-spacing:-1px;
    }

    .page-sub{
        font-size:15px;
    }
}

@media(max-width:380px){
    .page-hero{
        padding:90px 0 3rem;
    }

    .page-title{
        font-size:28px;
    }
}

/* COMING SECTION STYLE */

.work-coming{
    position:relative;
    overflow:hidden;

    width:min(1100px,90%);

    margin:80px auto;

    padding:90px 40px;

    background:#181818;

    border:1px solid rgba(245,200,66,.25);

    border-radius:30px;

    text-align:center;

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


/* hover */

.work-coming:hover{
    border-color:#F5C842;
}



.coming-inner{
    position:relative;
    z-index:2;
}

/* orbit */

.coming-orbit{
    position:absolute;

    width:230px;
    height:230px;

    border-radius:50%;

    border:1px dashed rgba(245,200,66,.35);

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    animation:rotate 15s linear infinite;

    opacity:.7;
}


.orbit-dot{
    position:absolute;

    width:10px;
    height:10px;

    background:#F5C842;

    border-radius:50%;

    top:-5px;
    left:50%;

    transform:translateX(-50%);

    box-shadow:0 0 20px #F5C842;
}


/* small tag */

.sec-tag{
    display:inline-block;

    color:#F5C842;

    font-size:11px;

    letter-spacing:1.5px;

    text-transform:uppercase;

    padding:6px 14px;

    border-radius:30px;

    border:1px solid rgba(245,200,66,.35);

    background:rgba(245,200,66,.08);

    margin-bottom:20px;
}

/* title */

.coming-title{
    color:#F0F0F0;

    font-size:42px;

    font-weight:800;

    line-height:1.2;

    letter-spacing:-1px;

    margin:15px 0;
}

/* paragraph */

.coming-sub{

    max-width:520px;

    margin:0 auto 35px;

    color:#888;

    font-size:16px;

    line-height:1.9;
}

/* button */

.btn-y{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:13px 32px;

    background:#F5C842;

    color:#111;

    border-radius:50px;

    font-size:14px;

    font-weight:700;

    text-decoration:none;

    transition:.3s ease;
}



.btn-y:hover{

    background:#FFD96B;

    transform:translateY(-3px);

    box-shadow:0 10px 30px rgba(245,200,66,.25);

}



@keyframes rotate{

    from{
        transform:translate(-50%,-50%) rotate(0deg);
    }

    to{
        transform:translate(-50%,-50%) rotate(360deg);
    }

}


/* mobile */

@media(max-width:700px){

    .work-coming{
        padding:70px 20px;
    }


    .coming-title{
        font-size:32px;
    }


    .coming-sub{
        font-size:14px;
    }


    .coming-orbit{
        width:170px;
        height:170px;
    }
    

}
/* MOBILE / TOUCH — no hover state to rely on, so drop the lift/shadow */
@media (hover: none) and (pointer: coarse){
    .pkg-card,
    .pkg-card:hover{
        transform:none;
        box-shadow:none;
    }
}
.pkg-card{
    touch-action: manipulation;
}