*{padding:0;margin:0;box-sizing:border-box;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-weight:700;list-style-type:none;text-decoration:none}:root{--primary: rgb(10, 112, 202);--light: #f8fafc;--dark: #0f172a;--gray: #cfd4dc;--text: #64748b;--warning: #f59e0b}.body{display:grid;grid-template-columns:1fr 4fr}aside{padding:1.4rem;background-color:var(--primary);display:flex;flex-direction:column;gap:2rem;position:relative}aside i{font-size:.8rem;color:var(--light);margin-right:1rem;font-weight:bolder}aside ul li{font-size:1rem;display:flex;align-items:center;gap:1rem;cursor:pointer;margin-bottom:1.3rem;transition:.4s all ease}aside ul li:hover{background-color:var(--light);border-radius:.2rem;padding:5px}aside span{color:var(--light)}aside ul li:hover i,aside ul li:hover span{color:var(--primary)}#close_arrow{display:none}#close_arrow i{font-size:2rem;position:absolute;bottom:5%;left:10%;cursor:pointer;transition:all .5s ease}#close_arrow i:hover{color:var(--warning)}.menu-toggle{display:none;background:none;border:none;font-size:1.3rem;color:var(--dark);cursor:pointer;padding-right:10px}header{background-color:var(--light);display:flex;flex-direction:column;flex-wrap:wrap;padding:.5rem;gap:15px}.header_sec1{display:flex;justify-content:flex-start;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:0 3rem}.header_sec1 input{width:40vw;padding:.2rem;border-radius:1rem;border:none;background-color:var(--gray);margin-left:10px}.header_sec1 .head_1{max-width:30vw;display:flex;gap:20px;align-items:center;font-size:.9rem}.header_sec1 .head_1 .img img{width:40px;height:40px;border-radius:50%}.header_sec1 .head_2{max-width:30vw;display:flex;gap:20px;align-items:center;font-size:1.1rem}.header_sec1 .head_2 .img img{width:50px;height:50px;border-radius:50%}.header_sec1 .nav ul{display:flex;gap:20px;align-items:center;flex-wrap:wrap}.header_sec1 .nav ul li a{font-size:.8rem;background-color:var(--primary);color:var(--light);padding:5px 20px;border-radius:20px;transition:all .3s ease-in-out}.header_sec1 .nav ul li a:hover{background-color:var(--warning);padding:10px 20px}main{background-color:var(--gray);display:grid;grid-template-columns:3fr 1fr;padding:20px;gap:20px}.cards{display:grid;grid-template-columns:1fr 1fr}.card{background-color:var(--light);border-radius:10px;padding:2rem 2rem 5rem;margin:1rem;border-left:4px var(--warning) solid;display:flex;flex-direction:column;gap:5px;box-shadow:2px 2px 5px #0000001a;transition:all .3s ease-in-out;position:relative}.card h3:nth-child(1),.card p:nth-child(2){align-items:flex-end;align-content:end;justify-content:flex-end}.card .icons:nth-child(3){align-self:flex-end;justify-content:flex-end;position:absolute;top:70%}.card .icons i{padding:5px 10px}.card:hover{transform:translateY(-5px);box-shadow:0 10px 25px #0000001a}.card p,.card2 p{font-weight:300;font-size:.8rem;color:var(--text)}.card2{background-color:var(--light);border-radius:10px;padding:1rem 1.5rem;box-shadow:2px 2px 5px #0000001a}.card2 .item{padding:15px 0}.card2 .item:nth-child(1),.card2 .item:nth-child(2){border-bottom:1px solid #d5dde8}.card2 .item2{display:flex;align-items:center;gap:1rem;margin-bottom:.7rem}.card2 .item2 .icon img{width:40px;height:40px;border-radius:50%}.main_sec2{display:flex;flex-direction:column;gap:20px}@media (max-width: 920px){.body{grid-template-columns:1fr}main{grid-template-columns:2fr 1fr}.cards{grid-template-columns:1fr}aside{position:fixed;left:-250px;top:0;height:100%;width:250px;transition:left .3s ease;z-index:100}aside .head,aside .main ul{margin-bottom:40px}.menu-toggle,#close_arrow{display:inline!important}aside.active{display:block;left:0}#close_arrow i.active{display:block}}@media (max-width: 750px){main{grid-template-columns:1fr}.cards{grid-template-columns:1fr}.header_sec1{flex-direction:column;padding:.5rem;gap:10px}.search{width:100%;display:flex;align-items:center}.header_sec1 input{width:100%;padding:.3rem;margin-left:10px}.header_sec1 .head_1{display:none}.header_sec1 .head_2{max-width:100%!important;padding:5px 0}.header_sec1 .nav{width:100%}.header_sec1 .nav ul{justify-content:center;gap:25px}.header_sec1 .nav ul li a{padding:6px 15px;font-size:.8rem}.head_2 .img img{width:3.5rem!important;height:3.5rem!important}.head_2 .title .name{font-size:1.2rem}}
