/* ============================
CareerSteps Premium Hanging Lamp
============================ */

.lamp-area{
width:100%;
height:240px;
display:flex;
justify-content:center;
align-items:flex-start;
position:relative;
overflow:hidden;
margin-bottom:40px;
}

.lamp-cable{

position:absolute;

top:0;

width:4px;

height:120px;

background:#d6d6d6;

border-radius:10px;

transform-origin:top center;

}

.hanging-lamp{

position:absolute;

top:115px;

width:70px;

height:70px;

border-radius:50%;

background:linear-gradient(180deg,#ffffff,#d9d9d9);

border:4px solid #fff;

cursor:grab;

box-shadow:

0 0 25px rgba(255,255,255,.8),

0 0 60px rgba(59,130,246,.5);

z-index:10;

transform-origin:top center;

}

.hanging-lamp:active{

cursor:grabbing;

}

.lamp-light{

position:absolute;

top:170px;

left:50%;

transform:translateX(-50%);

width:420px;

height:420px;

clip-path:polygon(48% 0%,52% 0%,100% 100%,0% 100%);

background:

linear-gradient(to bottom,

rgba(255,255,255,.8),

rgba(59,130,246,.25),

transparent);

filter:blur(25px);

opacity:.15;

pointer-events:none;

transition:.3s;

}

.lamp-glow{

position:absolute;

top:140px;

left:50%;

transform:translateX(-50%);

width:220px;

height:220px;

border-radius:50%;

background:radial-gradient(circle,

rgba(59,130,246,.45),

transparent 70%);

filter:blur(45px);

pointer-events:none;

}

@media(max-width:768px){

.lamp-area{

height:190px;

}

.hanging-lamp{

width:58px;

height:58px;

top:95px;

}

.lamp-cable{

height:100px;

}

.lamp-light{

width:240px;

height:260px;

top:140px;

}

}

.hidden-form{
opacity:0;
transform:translateY(60px);
pointer-events:none;
transition:.6s;
}

.show-form{
opacity:1;
transform:translateY(0);
pointer-events:auto;
}

.light-on{
opacity:1 !important;
filter:blur(18px);
}