*{ margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: "Encode Sans", sans-serif;
    background-color: #f4f4f4;
    color: #333;
    height: 100vh;
}

/*patterns*/
.tech-main-pattern-bg {
    background-color: #0d0f17;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g stroke='rgba(255,255,255,0.03)' stroke-width='1' fill='none'><rect width='80' height='80' /><path d='M0 0 L10 10 M80 0 L70 10 M0 80 L10 70 M80 80 L70 70' stroke='rgba(0, 242, 254, 0.08)'/><circle cx='10' cy='10' r='1' fill='rgba(0, 242, 254, 0.2)'/><circle cx='70' cy='10' r='1' fill='rgba(0, 242, 254, 0.2)'/></g></svg>");   
    background-repeat: repeat;
}
.tech-sidebar-bg{
    background-color: #121420;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 400 800' preserveAspectRatio='none'><defs><linearGradient id='glowGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'><stop offset='0%25' stop-color='%2300f2fe' stop-opacity='1'/><stop offset='100%25' stop-color='%234facfe' stop-opacity='0.2'/></linearGradient><filter id='glow' x='-20%25' y='-20%25' width='140%25' height='140%25'><feGaussianBlur stdDeviation='3' result='blur'/><feComposite in='SourceGraphic' in2='blur' operator='over'/></filter></defs><g stroke='rgba(0, 242, 254, 0.15)' stroke-width='1.5' fill='none'><path d='M-20,100 L150,100 L200,150 L200,300 L280,380 L420,380' /><path d='M100,-20 L100,200 L150,250 L150,450 L80,520 L80,820' /><path d='M250,-20 L250,120 L180,190 L180,350 L300,470 L300,820' stroke='rgba(157, 78, 221, 0.2)' /><path d='M420,200 L300,200 L250,250 L120,250 L50,320 L-20,320' stroke='rgba(157, 78, 221, 0.15)' /></g><g fill='%2300f2fe' filter='url(%23glow)'><circle cx='200' cy='150' r='3' /><circle cx='150' cy='450' r='3.5' opacity='0.8' /><circle cx='180' cy='190' r='3' stroke='%239d4ede' stroke-width='1' /><circle cx='300' cy='200' r='4' /></g></svg>");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/*Layouts*/
.layout-sidebar{
    display: flex;
    min-height: 100vh;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
}
.layout-sidebar .sidebar{
    width: 250px;
    color: #ecf0f1;
    padding:0;
    background-color: #25283B;
}
.layout-sidebar .content{
    flex: 1;
    padding: 15px;
    background-color: #191C2F;
}

.layout-topbar{
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
.layout-topbar .topbar{
    background-color: #2c3e50;
    color: #ecf0f1;
    padding: 15px;
}
.layout-topbar .content{
    flex: 1;
    padding: 15px;
}

.flex-vertical{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/*Menu sidebar*/
.sidebar-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:15px; gap:15px;
}
.sidebar-nav{
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top:15px;
    padding-bottom:15px;
    padding-right: 10px;
}
.nav-link{
    color: #ecf0f1;
    text-decoration: none;
    padding: 10px;
    border-radius:0 10px 10px 0;
    transition: all 0.3s ease;
    border-left:5px solid #25283B;
}
.nav-link:hover{
    background-color: #3F435E;
    border-left:5px solid #FFFFFF;
    color:#FFFFFF;
}