body{
margin:0;
font-family:Roboto;
background:#e2e8f0;
}

.container{
display:grid;
grid-template-columns:260px 1fr;
grid-template-rows:170px 1fr;
height:100vh;
}

.sidebar{
background:#1992d4;
color:white;
padding:20px;
grid-row:1/3;
}

.logo{
font-size:24px;
font-weight:700;
margin-bottom:30px;
}

.nav{
list-style:none;
padding:0;
margin-bottom:40px;
}

.nav li{
margin:15px 0;
cursor:pointer;
}

.nav i{
margin-right:10px;
}

.header{
background:white;
padding:20px;
display:grid;
grid-template-columns:2fr 1fr;
grid-template-rows:1fr 1fr;
}

.search input{
width:80%;
padding:8px;
border-radius:20px;
border:none;
background:#e2e8f0;
}

.header-right{
justify-self:end;
}

.greeting{
display:flex;
gap:10px;
align-items:center;
}

.actions{
justify-self:end;
}

.actions button{
padding:10px 20px;
border:none;
border-radius:20px;
background:#1992d4;
color:white;
margin-left:10px;
cursor:pointer;
}

.main{
display:grid;
grid-template-columns:3fr 1fr;
gap:20px;
padding:20px;
}

.cards{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
}

.card{
background:white;
padding:20px;
border-radius:10px;
border-left:6px solid orange;
box-shadow:0 3px 8px rgba(0,0,0,0.1);
}

.card-icons{
display:flex;
justify-content:flex-end;
gap:15px;
margin-top:20px;
color:gray;
cursor:pointer;
}

.announce-card{
background:white;
padding:15px;
border-radius:10px;
box-shadow:0 3px 8px rgba(0,0,0,0.1);
margin-bottom:10px;
}

.trend{
display:flex;
gap:10px;
align-items:center;
background:white;
padding:10px;
border-radius:10px;
box-shadow:0 3px 8px rgba(0,0,0,0.1);
margin-bottom:10px;
}

.trend span{
color:gray;
font-size:14px;
}