*{
box-sizing:border-box;
}


body{

margin:0;

height:100vh;

font-family:"Segoe UI",Arial,sans-serif;

background:
linear-gradient(135deg,#ffffff,#e5f3f1);

overflow:hidden;

}



#app{

height:100vh;

width:100vw;

display:flex;

justify-content:center;

align-items:center;

}



.selection{

width:95%;

height:95%;

overflow:auto;

text-align:center;

}



.logo{

font-size:42px;

font-weight:700;

letter-spacing:5px;

color:#007f78;

}



.subtitle{

font-size:22px;

color:#c45a2c;

}



.category-title{

color:#007f78;

margin:18px 0 8px;

}



.brand-grid{

display:grid;

grid-template-columns:
repeat(5,1fr);

gap:15px;

}



.brand-card{

background:white;

border-radius:18px;

padding:12px;

box-shadow:
0 8px 20px rgba(0,0,0,.15);

transition:.2s;

}



.brand-card img{

width:100%;

height:90px;

object-fit:contain;

}



.brand-name{

font-weight:600;

margin-top:8px;

font-size:16px;

}



.category{

font-size:12px;

color:#777;

}



.brand-card.selected{

border:5px solid #007f78;

transform:scale(1.05);

}



.start{

margin:20px;

padding:18px 70px;

border:none;

border-radius:40px;

background:#007f78;

color:white;

font-size:22px;

}




.viewer{

width:100vw;

height:100vh;

display:flex;

flex-direction:column;

}


.slide{

width:100%;

height:90%;

object-fit:contain;

}



.controls{

height:70px;

display:flex;

justify-content:space-between;

align-items:center;

padding:10px 40px;

}



button{

background:#007f78;

color:white;

border:none;

border-radius:30px;

padding:15px 35px;

font-size:18px;

}


.back{

background:#c45b2c;

}

.home{

background:#444;

}