*{margin:0;padding:0;box-sizing:border-box}:root{--base-color: white;--base-varient: #9370DB;--text-color: #111528;--base-background: #F0F8FF;--sec-text:white}body{font-family:Roboto,sans-serif;font-optical-sizing:auto;font-weight:0px;font-style:normal;font-variation-settings:"wdth" 100;background-color:var(--base-background)}.darkmode{--base-color:#ffffff;--base-varient:#7A1CAC;--text-color:rgb(255, 255, 255);--base-background:#070F2B;--sec-text:white}header{margin:0 5%;background-color:var(--base-background);padding:10px 0;color:var(--sec-text)}header>div{display:flex;justify-content:space-between;align-items:center}header{padding:20px 0;color:var(--text-color)}.header-container{display:flex;justify-content:space-between;align-items:center}.nav{display:flex;gap:20px;margin-left:200px}.nav a{color:var(--text-color);text-decoration:none;font-size:18px;transition:color .2s ease}.nav a:hover{color:var(--text-color)}.menu-icon{display:none;position:absolute;top:25px;right:10px;z-index:1001;cursor:pointer;color:var(--text-color)}@media (max-width: 600px){.menu-icon{display:block;margin-left:100px}.nav{position:fixed;top:0;right:-100%;width:200px;height:100vh;background-color:var(--base-varient);flex-direction:column;align-items:center;padding-top:60px;z-index:999;transition:right .3s ease}.nav a{padding:10px;color:#fff;display:block}.nav.open{right:0}}.theme-switch{height:50px;width:50px;padding:0;border-radius:50%;border:none;display:flex;justify-content:center;align-items:center;position:absolute;top:25px;right:50px;background:transparent;cursor:pointer}@media (max-width: 600px){.theme-switch{top:15px;right:40px}}.theme-switch svg{fill:var(--text-color)}.theme-switch svg:last-child{display:none}.darkmode #theme-switch svg:first-child{display:none}.darkmode #theme-switch svg:last-child{display:block}.home-sec{margin:5%;color:var(--sec-text);color:var(--text-color)}.circle{position:fixed;width:14px;height:14px;border-radius:50%;pointer-events:none;z-index:9999;opacity:.7;background-color:red;transition:transform .1s,opacity .3s ease;will-change:transform,opacity}@media (max-width: 600px){#home .circle{display:none!important}}.text-hl{color:var(--base-varient)}.home-sec>div{display:flex;justify-content:space-between;align-items:center}.img-wrapper>img{width:350px}.img-wrapper{width:50%;text-align:center}.text-wrapper{width:50%}.text-wrapper>h1,.text-wrapper>p{margin-bottom:10px}.btn-1{position:relative;background-color:var(--base-color);color:var(--base-varient);font-size:16px;padding:10px 20px;border-color:var(--base-varient);border-radius:10px;border-width:7px;cursor:pointer;overflow:hidden;transition:color .3s ease;z-index:1;width:300px}.btn-1:before{content:"";position:absolute;background-color:var(--base-varient);height:200px;width:400px;top:100%;left:100%;transition:all .7s;border-radius:5px;z-index:-1}.btn-1:hover{color:var(--base-color)}.btn-1:hover:before{top:-30px;left:-30px}@media only screen and (max-width: 600px){.home-sec>div{display:block}.home-sec>div>div{width:100%;text-align:center}}.about-sec{margin:5%;color:var(--text-color)}.about-sec>div{display:flex;justify-content:space-between;align-items:center}.about-sec>div>div{width:50%;text-align:center}.about-sec>div div>img{width:320px}.about-sec>div>div h1{margin-bottom:30px}@media only screen and (max-width: 600px){.about-sec>div{display:block;width:100%;text-align:center}.abt-text-wrapper{width:100%!important}.about-sec>div div>img{width:360px}}.project{margin:0 5%;color:var(--text-color)}.project h1{text-align:center;font-size:32px;margin-bottom:30px}.contact{margin:0 5%}.cards>div{display:flex;text-align:center;justify-content:space-between}@media only screen and (max-width: 600px){.cards{width:100%}.cards>div{display:flex;flex-direction:column;width:100%!important;align-items:center}.cards>div>a{width:90%!important}.cards>div img{width:50px;height:50px;margin-bottom:15px;border-radius:10px}}.cards>div img{width:100px;height:100px;margin-bottom:15px;border-radius:10px}.cards>div a{background-color:var(--base-varient);padding:20px;margin:10px;border-radius:20px;width:22.5%;text-decoration:none;color:var(--sec-text);display:inline-block;transition:background-color .3s ease,transform .2s ease,box-shadow .3s ease}.cards>div a:hover{transform:translateY(-5px);box-shadow:0 0 5px 5px var(--sec-text)}.cards>div a:active{transform:translateY(0);box-shadow:0 4px 8px #0000001a}.cards>div h3{margin-bottom:10px;font-size:15px}.contact{margin:100px 5%;color:var(--text-color)}.contact>div>div h1{text-align:center;margin-bottom:30px}form{width:100%;padding:0 10%}form input,form textarea{width:100%;padding:20px;outline:none;border:none;background:var(--base-varient);color:var(--sec-text);margin-bottom:.5rem;border-radius:5px}form input::placeholder,form textarea::placeholder{color:var(--sec-text)}textarea{height:200px;resize:none}.skills-container{margin:55px 5%}.skills-container>div>h1{text-align:center;margin-bottom:20px;color:var(--text-color)}.skills-container>.circle-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;justify-items:center;padding:20px}.progress-bar{width:150px;height:150px;position:relative}@media only screen and (max-width: 600px){.progress-bar{width:85px;height:85px}.circle-bar{padding:0%!important}.skills-container>div>h1{margin-bottom:50px}}.progress-circle{width:100%;height:100%;transform:rotate(-90deg)}.progress-bg{fill:none;stroke:var(--base-color);stroke-width:8}.progress-fg{fill:none;stroke:var(--base-varient);stroke-width:8;stroke-linecap:round}.progress-value{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:16px;font-weight:700;color:var(--text-color)}.progress-label{display:block;font-size:12px;color:var(--text-color);margin-top:4px}@media (max-width: 768px){.skills-container{grid-template-columns:repeat(2,1fr)}}@media (max-width: 480px){.skills-container{grid-template-columns:repeat(1,1fr)}}input[type=submit]{background-color:var(--base-varient);color:#fff;padding:12px 20px;border:none;border-radius:8px;cursor:pointer;font-size:16px;transition:background-color .3s ease,transform .2s ease}input[type=submit]:hover{background-color:var(--text-color);color:var(--base-background);transform:translateY(-3px);box-shadow:0 2px 16px var(--text-color)}input[type=submit]:active{transform:translateY(0);box-shadow:0 4px 8px var(--base-varient)}