@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Urbanist:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


*{
    margin: 0;
    padding: 0;
}

body{
    width: 100%;
    height: 100%;
}

a{
    text-decoration: none;
}


body{
    background: #151515;
box-shadow: 0px 27px 80px 0px rgba(0, 0, 0, 0.16);
display: flex;

}


aside{
    min-width: 300px;
    border-right: #272727 solid;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px 0;
    
  
}



.logo{
    color: #FFF;
    font-family: Urbanist;
font-size: 23px;
font-weight: 700;
line-height: 29px;
margin-bottom: 60px ;

}




.aside-buttons{
    display: flex;
    flex-direction: column;
    height: 100%;
   
}

.buttons{
display: flex;
flex-direction: column;
gap:15px;

}


.buttons label{
color: #898989;
font-family: Urbanist;
font-size: 13.587px;
font-weight: 500;
letter-spacing: 0.679px;
margin: 15px 0;
}

.buttons a{
margin-left: 10px;
justify-content: space-between;
width: 100px;
display: flex;
border:#898989 solid ;
padding: 20px;
border-radius:14px ;

}

.buttons p{
color: #898989;
font-family: Urbanist;
font-size: 15.528px;
font-style: normal;
font-weight: 400;
line-height: 140%; 
}
.buttons i{
color: #898989;
font-size: 20px;
}



.buttons a:hover{
border: #fff solid;



}


.buttons a:hover p, .buttons a:hover i{
color: #FFF;
}


nav{
    border-bottom: #272727 solid ;
    height: 85px;
    padding: 10px 0;
  display: flex;

}


.nav-container{
    display: flex;
    justify-content: space-between;
    margin: 10px auto;
    width: 1200px;
    padding: 0 20px;
    align-items: center;
}




.search{
    width: 339px;
    height: 38px;
    border-radius: 31px;
    display: flex;
    background: #1E1E1E;
    align-items: center;
    padding: 11px;


}

.search input{
    border: none;
    background-color: transparent;
    width: 100%;
    height: 100%;
    outline: none;
    color: #898989;
    

}


.search input:focus{
color: #fff;

}




.search label{
margin-right:10px;
color: #898989;


}



.nav-buttons a{
    margin-left: 10px;
    color: #898989;
    padding: 10px;
    background-color: #1E1E1E;;
    border-radius: 50%;

}

.nav-buttons a:hover{
color: #FFF;
}






main{
width: 100%;
display: flex;
flex-direction: column;


}





.container{
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: auto;

    max-width: 1200px;

}



.top-elements{
display: flex;
justify-content: space-between;
margin: 50px 0;
padding: 20px 20px;
margin: 0px auto;
width: 100%;

}

.filter{
width: 120px;
height: 40px;
display: flex;
background-color: #1E1E1E;
border-radius: 30px;
align-items: center;
padding: 3px 5px;

}


.filter select{
background-color: transparent;
text-align: center;
color: #898989;
border:none;
outline: none;
appearance: none;
width: 100%;
color: #898989;
font-family: Urbanist;
font-size: 13px;
font-weight: 400;
line-height: 140%; 
height: 100%;
}

.filter i {
    color: #898989;
}


.filter option{
    background-color: #151515;
}

.top-elements h2{
color: #FFF;
font-family: Urbanist;
font-size: 27px;
font-weight: 700;

}

.catogory{
display: flex;
gap: 70px;
width: 100%;
justify-content: space-around;
flex-wrap: wrap;

}






.element{
min-width: 315px;
height: 180px;
border-radius: 15px;
background: #1E1E1E;
display: flex;
flex-direction: column ;
justify-content: space-around;


}

/*   
border-left: 5px #29C5EE solid;
box-shadow:10px 10px 10px  #29C5EE26;
background: url(images/Ellipse\ 8.png) no-repeat right center;
*/

#ux{
border-left: 5px #29C5EE solid;
box-shadow:10px 10px 10px  #29C5EE26;
background: url(images/blue.png) no-repeat right center;
}

#growth{
border-left: 5px #CF1A2C solid;
box-shadow:10px 10px 10px #CF1A2C26;
background: url(images/red.png) no-repeat right center;
}


#finance{
border-left: 5px #EAB04D solid;
box-shadow:10px 10px 10px  #EAB04D33;
background: url(images/yellow.png) no-repeat right center;
}

#secure{
border-left: 5px #19C8A7 solid;
box-shadow:10px 10px 10px  #19C8A726;
background: url(images/blue.png) no-repeat right center;
}


.element-top{
display: flex;
justify-content: space-around;
}

.element button{
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
margin-top: 10px;
cursor: pointer;
font-size: 20px;
color: #FFFFFF;
background-color: rgba(255, 255, 255, 0.10);

}



.element img{
width: 45px;
height: 45px;



}

.element-logo{
display: flex;
 margin:15px 5px;
}

.element-texts{
display: flex;
flex-direction: column;
}

.element-texts p{
color: #FFF;
text-align: center;
font-family: Urbanist;
font-size: 17px;
font-weight: 700;
}

.element-texts i{
color: #898989;
text-align: center;
font-family: Urbanist;
font-size: 11.646px;
font-weight: 500;

}


.tags{
display: flex;
gap: 20px;
margin-left: 20px;

}

.tag{
padding: 5px 10px;
border-radius: 24px;
background: #282828;
width: auto;
height: 25px;
display: flex;
gap: 4px;
align-items: center;
cursor: pointer;
justify-content: center;
}

.tag i, .tag p{
color: #898989;


}



.tag p{
color: #898989;
font-family: Urbanist;
font-size: 13px;
font-weight: 500;
line-height: 100%;
}

.tag:hover i, .tag:hover p{
color: white;
transition: color 0.3s;

}





.element-bottom{
display: flex;
justify-content: space-around;
align-items: center;

}

.works{
display: flex;
align-items: center;
gap: 4px;

}


.works h2{
color: #FFF;
font-family: Urbanist;
font-size: 38px;
font-weight: 700;
}

.works label{
color: #898989;
font-family: Urbanist;
font-size: 12px;
font-weight: 400;
}


.element-bottom p{
color: #00B85E;
font-family: Urbanist;
font-size: 12px;
font-weight: 400;
line-height: 140%;
}


.profile{
    display: flex;
    align-items: center;
    gap: 10px;
    color: #FFF;
    font-family: Urbanist;
    font-size: 16px;
    font-weight: 500;
}

.table{
    border-radius: 16px;
background: #1E1E1E;
margin: 30px auto ;
width: 1200px;
}
 .table-top p{
    color: #898989;
text-align: center;
font-family: Urbanist;
font-size: 16px;
font-weight: 500;
cursor: pointer;
line-height: 140%; 
 }


table{
    width: 100%;
    margin: auto;
    color: #FFF;
    font-family: Urbanist;
    font-size: 16px;

    font-weight: 500;
}

.table-top {
display: flex;
gap: 100px;
padding: 20px;
}







td{
    padding: 24px;
}

.titles{
color: #898989;
font-family: Urbanist;
font-size: 14px;
background-color: #262626;
border-radius: 8px;
font-weight: 500;
}
.titles td{
    cursor: pointer;
}


#selected{
    color: #FFF;
    text-align: center;
    font-family: Urbanist;
    font-size: 16px;
    font-weight: 700;
    
    line-height: 140%;
}

td  {
    border-top: solid #272727;
}