/* Start custom CSS for html, class: .elementor-element-d71b56b *//* =========================
   BASE PAGE
========================= */
.creations-archive{
    background:#050505;
    padding:100px 5%;
    color:#EAEAEA;
    font-family:inherit;
}

/* =========================
   PAGE HEADER
========================= */
.archive-heading{
    text-align:center;
    max-width:850px;
    margin:0 auto 100px;
}

.archive-heading span{
    color:#CC9D6B;
    letter-spacing:4px;
    font-size:13px;
    text-transform:uppercase;
}

.archive-heading h1{
    font-size:clamp(40px,6vw,70px);
    margin:15px 0;
    color:#FFFFFF;
}

.archive-heading p{
    color:rgba(255,255,255,0.75);
    line-height:1.8;
}

/* =========================
   PROJECT CONTAINER
========================= */
.creation-item{
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:60px;

    align-items:center;

    margin-bottom:110px;
    padding:35px;

    border-radius:28px;

    background:rgba(255,255,255,0.04);
    border:1px solid rgba(204,157,107,0.35);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    position:relative;
    overflow:hidden;

    box-shadow:0 25px 80px rgba(0,0,0,0.55);
}

/* GOLD TOP LINE */
.creation-item::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:2px;
    background:#CC9D6B;
}

/* =========================
   ALTERNATE LAYOUT
========================= */
.creation-item.reverse{
    grid-template-columns:1fr 1.1fr;
}

/* =========================
   IMAGE SECTION
========================= */
.creation-image{
    overflow:hidden;
    border-radius:22px;
}

.creation-image img{
    width:100%;
    height:560px;
    object-fit:cover;

    border-radius:22px;

    transition:transform .6s ease;
}

.creation-item:hover .creation-image img{
    transform:scale(1.05);
}

/* =========================
   CONTENT SECTION (FIX CONTRAST)
========================= */
.creation-content{
    color:#EDEDED;
}

.creation-type{
    display:inline-flex;
    padding:8px 14px;

    border-radius:40px;

    border:1px solid rgba(204,157,107,0.5);
    background:rgba(204,157,107,0.10);

    color:#CC9D6B;

    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;

    margin-bottom:15px;
}

/* TITLE */
.creation-content h2{
    font-size:clamp(28px,4vw,46px);
    margin:15px 0 20px;

    color:#FFFFFF;
}

/* DIVIDER */
.project-divider{
    width:70px;
    height:2px;
    background:#CC9D6B;
    margin-bottom:25px;
}

/* TEXT */
.creation-content p{
    color:rgba(255,255,255,0.78);
    line-height:1.9;
    margin-bottom:18px;
}

/* =========================
   NUMBER STYLE
========================= */
.project-number{
    color:#CC9D6B;
    font-size:18px;
    margin-right:10px;
}

/* =========================
   BUTTON (FIX VISIBILITY)
========================= */
.creation-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:14px 28px;

    border-radius:50px;

    border:1px solid #CC9D6B;

    background:transparent;

    color:#FFFFFF;

    text-decoration:none !important;

    font-size:14px;
    letter-spacing:1px;

    transition:all .35s ease;

    margin-top:10px;
}

.creation-btn:hover{
    background:#CC9D6B;
    color:#000;
    transform:translateY(-2px);
}

/* =========================
   HOVER CARD EFFECT
========================= */
.creation-item:hover{
    border-color:#CC9D6B;
    box-shadow:0 35px 100px rgba(204,157,107,0.08);
}

/* =========================
   SPECIAL YIN YANG CARD
========================= */
.yin-yang-card::after{
    content:"";
    position:absolute;
    inset:0;

    background:linear-gradient(
        135deg,
        rgba(255,255,255,0.03),
        transparent 45%,
        rgba(204,157,107,0.08)
    );

    pointer-events:none;
}

/* =========================
   MOBILE RESPONSIVE
========================= */
@media(max-width:900px){

    .creation-item,
    .creation-item.reverse{
        grid-template-columns:1fr;
        gap:25px;
        padding:25px;
    }

    .creation-image img{
        height:auto;
    }

    .creation-content h2{
        font-size:28px;
    }

    .creation-btn{
        width:100%;
        text-align:center;
    }
}




/* =========================
   SCROLL REVEAL (CINEMATIC)
========================= */
.creation-item{
    opacity:0;
    transform:translateY(80px);
    transition:all 1s cubic-bezier(.16,1,.3,1);
}

.creation-item.show{
    opacity:1;
    transform:translateY(0);
}

/* =========================
   STICKY PROJECT NUMBER
   (NOW VIEWING FEEL)
========================= */
.project-number{
    position:sticky;
    top:20px;

    display:inline-block;

    font-size:14px;
    letter-spacing:2px;

    color:#CC9D6B;
    margin-right:10px;
}

/* =========================
   EXHIBITION HOVER GLOW
========================= */
.creation-item{
    position:relative;
}

.creation-item::after{
    content:"";
    position:absolute;
    inset:0;

    border-radius:28px;

    background:radial-gradient(
        circle at var(--x,50%) var(--y,50%),
        rgba(204,157,107,0.12),
        transparent 40%
    );

    opacity:0;
    transition:opacity .4s ease;

    pointer-events:none;
}

.creation-item:hover::after{
    opacity:1;
}

/* =========================
   IMAGE SOFT DEPTH ON SCROLL
========================= */
.creation-image img{
    transition:transform .8s ease, filter .8s ease;
}

.creation-item.show .creation-image img{
    filter:contrast(1.05) saturate(1.05);
}

/* =========================
   SMOOTHER SECTION FLOW
========================= */
.creation-item{
    margin-bottom:140px;
}

/* =========================
   GOLD FOCUS BORDER ON HOVER
========================= */
.creation-item:hover{
    border-color:#CC9D6B;
    box-shadow:0 40px 120px rgba(204,157,107,0.08);
}/* End custom CSS */