*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
background:#2b2927;
color:#ddd;
font-family: 'Inter', sans-serif;
min-height:100vh;
}

.top{
padding:20px 60px;
font-size:12px;
opacity:0.6;
letter-spacing:1px;
}

.container{
display:flex;
justify-content:space-between;
padding:60px;
gap:40px;
}

.left{
width:36%;
}

.korean{
font-size:90px;
color:#ea770b;
margin-bottom:10px;
}

.logo{
font-weight:300;
letter-spacing:4px;
margin-bottom:40px;
}

.subtitle{
font-size:12px;
letter-spacing:2px;
margin-bottom:20px;
opacity:0.7;
}

.intro{
font-style:italic;
line-height:1.7;
margin-bottom:30px;
}

.line{
width:40px;
height:2px;
background: #fcd135;
margin:20px 0;
}

.text{
font-size:14px;
line-height:1.7;
opacity:0.7;
margin-bottom:40px;
}

.footer{
font-size:12px;
opacity:0.6;
}

.right{
display:flex;
gap:30px;
flex:1;
align-items:center;
justify-content:flex-start;
}

.card{
position:relative;
width:400px;
height:580px;
border-radius:16px;
overflow:hidden;
display:flex;
align-items:flex-end;
justify-content:center;
padding:40px;
background:#2b2927;
border:1px solid rgba(255,255,255,0.1);
transition:0.4s;
object-fit: contain;
}

.card:hover{
transform:translateY(-6px);
border-color:rgba(255,255,255,0.3);
}

button{
background:#741A29;
border:none;
padding:14px 26px;
border-radius:30px;
color:white;
font-weight:600;
cursor:pointer;
transition:0.4s;
}

button:hover{
background:#741A29;
}

.bg{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
top:0;
left:0;

opacity:0.35;
filter:brightness(0.7);
transition:all 0.6s ease;
}

.interactif{
background-image:url("img/interactif.jpg");
}

.catalogue{
background-image:url("img/catalogue.jpg");
}


.card:hover .bg{
opacity:0.8;
filter:brightness(1);
transform:scale(1.05);
}

button{
position:relative;
z-index:2;
}

.card:hover button{

    
background:linear-gradient(
45deg,
#ff7a18,
#ffb347,
#ffd000
);

color:black;
}

.card:hover{
transform:translateY(-10px);
border-color:rgba(255,255,255,0.35);
box-shadow:0 10px 40px rgba(0,0,0,0.6);
}