@import "tailwindcss";

/* Your custom CSS goes below */


*{
    padding: 0;
    margin: 0;
}

body{
    background-color: black;
}

.image-global{
    background: url(/images/plan-69159a65c5684763515973.jpg);
    width: 80vw;
    height: 90vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


.all-roomes{
    display: grid;
    grid-template-columns: 37.5% 17.5% 22.5% 22.5%;
    grid-template-rows: repeat(3 , 1fr);
}

.box1{
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

.box2{
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}

.box3{
    grid-column: 4 / 5;
    grid-row: 1 / 2;
}

.box4{
    grid-column: 1 / 2;
    grid-row: 2 / 4;
}

.box5{
    grid-column: 3 / 4;
    grid-row: 3 / 4;
}

.box6{
    grid-column: 4 / 5;
    grid-row: 3 / 4;
}

#add-new-worker{
    font-family: "Bricolage Grotesque", sans-serif;
}

#title-work-space{
    font-family: "Bricolage Grotesque", sans-serif;
}

#worker-ici{
    font-family: "Bricolage Grotesque", sans-serif;
}


@keyframes popupFade {
  0% { opacity: 0; transform: translateY(20px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes cardFade {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 15px rgba(255,255,255,0.15); }
  50% { box-shadow: 0 0 25px rgba(255,255,255,0.35); }
}

@keyframes sidebarFade {
  0% { opacity: 0; transform: translateX(-15px) scale(.95); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}