:root{--primary-color: #1e40af;--secondary-color: #64748b;--accent-color: #f59e0b;--background-color-dark: #080808;--background-color-light: #fff;--text-color-primary: #fff;--text-color-secondary: #ababab;--font-xs: .75rem;--font-sm: .875rem;--font-base: 1rem;--font-lg: 1.125rem;--font-xl: 1.25rem;--font-xxl: 1.5rem;--font-3xl: 1.75rem;--font-4xl: 1.875rem;--font-5xl: 3rem;--font-6xl: 3.75rem;--radius-sm: 5px;--radius-md: 10px;--radius-lg: 15px}*{margin:0;padding:0;font-family:Poppins,sans-serif;box-sizing:border-box}body{background-color:var(--background-color-dark);color:var(--text-color-primary)}#header{width:100%;height:100vh;background-image:url(/assets/tshego-memoji-23IUax5E.png);background-size:auto 85%;background-position:right;background-repeat:no-repeat}.container{padding:10px 10%}nav{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}.logo{width:440px;font-size:var(--font-xxl);background-image:url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'?%3e%3c!--%20Uploaded%20to:%20SVG%20Repo,%20www.svgrepo.com,%20Generator:%20SVG%20Repo%20Mixer%20Tools%20--%3e%3csvg%20width='800px'%20height='800px'%20viewBox='0%200%2036%2036'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20aria-hidden='true'%20role='img'%20class='iconify%20iconify--twemoji'%20preserveAspectRatio='xMidYMid%20meet'%3e%3cpath%20fill='%23DE3830'%20d='M32%205H6.5L19%2013.5h17V9a4%204%200%200%200-4-4z'%3e%3c/path%3e%3cpath%20fill='%23002395'%20d='M6.5%2031H32a4%204%200%200%200%204-4v-4.5H19L6.5%2031z'%3e%3c/path%3e%3cpath%20fill='%23141414'%20d='M0%2011v14l10.5-7z'%3e%3c/path%3e%3cpath%20fill='%23FFB611'%20d='M0%209v2l10.5%207L0%2025v2l13.5-9z'%3e%3c/path%3e%3cpath%20fill='%23007A4D'%20d='M3.541%205.028A4%204%200%200%200%200%209l13.5%209L0%2027a4%204%200%200%200%203.541%203.972L18.5%2020.5H36v-5H18.5L3.541%205.028z'%3e%3c/path%3e%3cpath%20fill='%23EEE'%20d='M6.5%205H4c-.156%200-.308.011-.459.028L18.5%2015.5H36v-2H19L6.5%205zM3.541%2030.972c.151.017.303.028.459.028h2.5L19%2022.5h17v-2H18.5L3.541%2030.972z'%3e%3c/path%3e%3c/svg%3e");background-size:auto 75%;background-position:left;background-repeat:no-repeat}.logo span{color:var(--primary-color);font-size:var(--font-3xl);font-weight:600;padding-left:50px}nav ul li{display:inline-block;list-style:none;margin:10px 20px}nav ul li a{color:var(--text-color-primary);text-decoration:none;font-size:var(--font-lg);position:relative}nav ul li a:after{content:"";width:0;height:3px;background:var(--primary-color);position:absolute;left:0;bottom:-6px;transition:.5s}nav ul li a:hover:after{width:100%}.header-text{margin-top:20%;font-size:var(--font-3xl)}.header-text h1{font-size:var(--font-6xl)}.header-text h1 span{color:var(--primary-color)}#about{padding:80px 0;color:var(--text-color-secondary)}.row{display:flex;justify-content:space-between;flex-wrap:wrap}.about-col-1{flex-basis:35%}.about-col-1 img{display:block;width:100%;height:auto;border-radius:var(--radius-lg)}.about-col-2{flex-basis:60%}.sub-title{font-size:var(--font-6xl);font-weight:600;color:var(--text-color-primary)}.tab-titles{display:flex;margin:20px 0 40px}.tab-links{margin-right:50px;font-size:var(--font-lg);font-weight:500;cursor:pointer;position:relative;transition:transform .3s ease}.tab-links:hover{transform:scale(1.05)}.tab-links:after{content:"";width:0;height:3px;background:var(--primary-color);position:absolute;left:0;bottom:-8px;transition:.5s}.tab-links.active-link:after{width:50%}.tab-contents ul li{list-style:none;margin:10px 0}.tab-contents ul li span{color:var(--primary-color);font-size:var(--font-sm)}.tab-contents{display:none}.tab-contents span:hover{color:var(--primary-color);cursor:pointer}.tab-contents.active-tab{display:block}#projects{padding:30px 0}.projects-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));grid-gap:40px;margin-top:50px}.projects-list div{background-color:#262626;padding:30px;font-size:13px;font-weight:300;border-right:10px;overflow:hidden;transition:transform .3s ease}.projects-list div:hover{transform:scale(1.003)}.project-image-wrapper{position:relative;width:100%;aspect-ratio:16 / 11;overflow:hidden;margin-bottom:.5rem}.project-image-wrapper img{width:100%;height:100%;object-fit:contain;border-radius:8px;transition:transform .3s ease}.project-image-wrapper:hover img{transform:scale(1.05)}.site-footer{background-color:#262626;color:#fff;text-align:center;padding:10px;font-size:14px;margin-top:40px}.site-footer p{margin:0}@media (max-width: 910px){#header{background-image:none}}