.c1{
    overflow: hidden;
    position: relative;
    margin-top: -50px;
    height: 800px;
}
.l1{
    position: absolute;
    top: 0;
    left: 0;
    width: 1140px;
    max-width: 90%;
    transform: translateX(-0%);
    height: 80%;
}
.item{
    position: absolute;
    left: 10%;
    top: 10%;   
    width: 60%;
    height: 95%;
    font-size: 15px;

}

.item img{
    width: 50%;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: 0.5s;
}
.det{
    opacity:0 ;
    position: absolute;
    top: 5%;
    right: 40%;
    left: 50%;
    
}
.intro{
    position: absolute;
    transform: translateY(-50%);
    width: 59%;
    top: 60%;
    left: -8%;
    opacity:0;
    
    font-family: Arial, Helvetica, sans-serif;
}
 .item .intro .ti{
    font-weight: 200px;
    color: rgb(226, 160, 6);
    position:absolute;
    top: -20%;
    size: 30px;
    font-family: 30px;
    width: 300px;
    padding-bottom: 3000px;
    opacity: 1;

}
.intro .to{
    color: darkslategray;
    padding-top:10px; 
    padding-bottom: 20px;

}
.intro .des{
    color: ;
    padding-bottom: 20px;
    opacity: 0;
}
button{
    border-radius: 5px;
    background-color:darkslategray ;
    color: rgb(226, 160, 6);
   
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;

    
}
button:hover{
    border-radius: 5px;
    background-color: rgb(226, 160, 6);
    color: darkslategray;
    
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;

    
}
.item:nth-child(2) .intro{
    opacity: 1;
    
    transition: opacity 0.5s;
    transition: 1s;
}
.item:nth-child(2) button:hover{
    border-radius: 5px;
    background-color: rgb(226, 160, 6);
    color: darkslategray;
    font-weight: 30px;
    padding: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border: solid 2px darkslategray;

    
}


.item .det :nth-child(2){
    opacity: 1;
}
.item:nth-child(n+6){
    opacity: 0;
    pointer-events: none;
    transition: 1s;
}
.item:nth-child(2){
    transform: translate(0,0) scale(1);
    filter: blur(0);
    z-index: 10;
    opacity: 1;
    transition: 1s;
    
}
.item:nth-child(1){
    transform: translate(-100%,40%) scale(1.5);
    filter:blur(34px);
    z-index: 10;
    opacity: 1;
    transition: 1s;
}
.item:nth-child(3){
    transform: translate(45%,-7%) scale(0.8);
    filter:blur(15px);
    z-index: 9;
    transition: 1s;
    opacity: 1;
}
.item:nth-child(4){
    transform: translate(85%,-10%) scale(0.6);
   filter:blur(20px);
    z-index: 8;
    opacity: 1;
    transition: 1s;
}
.item:nth-child(5){
    transform: translate(120%,-15%) scale(0.4);
    filter:blur(30px);
    z-index: 7;
    opacity: 1;
    transition: 1s;
}

:root{
    --item1-transform: translate(-100%,-5%) scale(1.5);
    --item1-filter:blur(30px);
    --item1-z-index: 11;
    --item1-opacity: 0;


    --item2-transform: translate(0,0) scale(3);
    --item2-filter: blur(0);
    --item2-z-index: 10;
    --item2-opacity: 1;

    --item3-transform:translate(45%,-7%) scale(0.8);
    --item3-filter:blur(30px);
    --item3-z-index: 9;
    --item3-opacity: 0;

    --item4-transform: translate(85%,-10%) scale(0.6);
    --item4-filter:blur(30px);
    --item4-z-index: 8;
    --item4-opacity: 0;

    --item5-transform: translate(120%,-15%) scale(0.4);
    --item5-filter:blur(30px);
    --item5-z-index: 7;
    --item5-opacity: 0;
}

.prne{
    position: absolute;
    top: 80%;
    left:45% ;
    gap: 20px;
    padding-left: 20px;
}
.prne button{
    
}

.item:nth-child(2) .intro .ti,
.item:nth-child(2) .intro .to,
.item:nth-child(2) .intro .des,
.item:nth-child(2) .intro .spec,
.item:nth-child(2) .intro button
{
    opacity: 0;
    animation: show  0.7s ease-in;
}


.item:nth-child(2) .intro .ti{
    animation-delay: 0.3s ;
    opacity: 1;

   
}

.item:nth-child(2) .intro .to{
    animation-delay: 0.7s;
    opacity: 1;

    
}
.item:nth-child(2) .intro .des{
    animation-delay: 1.1s;
    opacity: 1;
    
}
.item:nth-child(2) .intro .spec{
    animation-delay: 1.3s;
    opacity: 1;
   
}
.item:nth-child(2) .intro button{
    animation-delay: 1.5s;
    opacity: 1;
    
}
#e{
    position: absolute;
    top: 20%;
    left:130%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    width: 50%;
    background-color: rgba(0, 0, 0, 0.871);
    backdrop-filter: blur(10px);
    color: white;
    padding: 70px;
    opacity: 0;
    transition: 0.5s;
    z-index: 2000;
    
}
#colo{
    padding-bottom: 10%;
    display: flex;
}
span{
    display: none;
    position: absolute;
}
#colo input:checked~span{
    display: block;
}

#balck{
    width: 20px;
    height: 20px;
    background-color: rgb(0, 0, 0);
    position: absolute;
    z-index: 500;
    border-radius: 50%;
    position: absolute;
    top: 70%;
    left: 25px;

}
#whit{
    width: 20px;
    height: 20px;
    background-color: rgb(255, 255, 255);
    position: absolute;
    z-index: 500;
    border-radius: 50%; 
    position: absolute;
    top: 69.7%;
    left: 65px;
    border: solid 1px black;

}
#colo input{
    position: absolute;
    top: 70%;
    width: 20px;
    height: 20px;
    z-index: 3800;
    gap: 10px;
    opacity: 0;


}
.ab:focus~img{
    display: block;
    transform: translateX(400px);
    top: 16%;
    transition: 0.5s;
    width: 500px;
}
#white{
    left: 30px;
}

#size{
    padding-bottom: 30px;
    transform: translateX(-14px);
    z-index: 4000;
   
}
#placed{
    width: 300px;
    position: absolute;
    color: white;
    top: 0%;
    padding: 20px;
    left: 120%;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    display: none;
    transition: 0.5s;
   

    

}
#o{
    transform: translateY(-25px) translateX(190px);
}

#placed img{
    width: 100px;
}
button:focus~#placed{
    transition: 0.5s;
    display: block;
    

}
.ab{
    position: absolute;
    top: 80%;
    z-index: 1000;
}
.ab:focus~#sdet #e{
    transform: translateX(-190%);
    display: block;
    opacity: 1;
    top: 10%;
    background-color: rgba(0, 0, 0, 0.799);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    backdrop-filter: blur(30px);
}
#sdet{
    background-color: transparent;
    transition: 0.5s;
    
}
.ab:focus~#sdet #si{
    transform: translateX(400px);
    top: 0;
    transition: 0.5s;
    width: 500px;
   
    
    
}