:root{--clr-primary-1: hsl(205, 86%, 17%);--clr-primary-2: hsl(205, 77%, 27%);--clr-primary-3: hsl(205, 72%, 37%);--clr-primary-4: hsl(205, 63%, 48%);--clr-primary-5: #49a6e9;--clr-primary-6: hsl(205, 89%, 70%);--clr-primary-7: hsl(205, 90%, 76%);--clr-primary-8: hsl(205, 86%, 81%);--clr-primary-9: hsl(205, 90%, 88%);--clr-primary-10: hsl(205, 100%, 96%);--clr-grey-1: hsl(209, 61%, 16%);--clr-grey-2: hsl(211, 39%, 23%);--clr-grey-3: hsl(209, 34%, 30%);--clr-grey-4: hsl(209, 28%, 39%);--clr-grey-5: hsl(210, 22%, 49%);--clr-grey-6: hsl(209, 23%, 60%);--clr-grey-7: hsl(211, 27%, 70%);--clr-grey-8: hsl(210, 31%, 80%);--clr-grey-9: hsl(212, 33%, 89%);--clr-grey-10: hsl(210, 36%, 96%);--clr-white: #fff;--clr-red-dark: hsl(360, 67%, 44%);--clr-red-light: hsl(360, 71%, 66%);--clr-green-dark: hsl(125, 67%, 44%);--clr-green-light: hsl(125, 71%, 66%);--clr-secondary: hsla(182, 63%, 54%);--clr-black: #222;--ff-primary: "Roboto", sans-serif;--ff-secondary: "Open Sans", sans-serif;--transition: all .3s linear;--spacing: .25rem;--radius: .5rem;--light-shadow: 0 5px 15px rgba(0, 0, 0, .1);--dark-shadow: 0 5px 15px rgba(0, 0, 0, .2);--max-width: 1170px;--fixed-width: 620px}*,:after,:before{margin:0;padding:0;box-sizing:border-box}body{font-family:Roboto;background-color:#080808;color:#fff;line-height:1.5;font-size:3rem}ul{list-style-type:none}a{text-decoration:none}h1,h2,h3,h4{text-transform:capitalize;line-height:1.25;margin-bottom:.75rem}h1{font-size:2rem}h2{font-size:1rem}h3{font-size:1.25rem}h4{font-size:.875rem}p{font-size:15px;margin-bottom:1.25rem;color:var(--clr-primary-10)}.btn{text-transform:uppercase;background:transparent;color:#14dbe7;padding:.375rem .75rem;letter-spacing:var(--spacing);display:inline-block;transition:var(--transition);font-weight:900;font-size:10px;border:2px solid var(--clr-primary-10);cursor:pointer;border-radius:var(--radius)}.btn:hover{color:var(--clr-white);background:var(--clr-black)}.btn-white{color:var(--clr-white);border-color:var(--clr-white);border-radius:0;padding:.5rem 1rem}.btn:hover{background:var(--clr-white);color:var(--clr-secondary)}@media screen and (min-width: 800px){h1{font-size:6rem}h2{font-size:3.5rem}h3{font-size:2.75rem}h4{font-size:2rem}body{font-size:1rem}h1,h2,h3,h4{line-height:1}}nav{z-index:100;background:#080808;position:fixed;box-shadow:0 5px 15px #0000001a;width:100%}.nav-header{display:flex;justify-content:space-between}.nav-center{padding:1rem}.logo{height:50px}.nav-toggle{font-size:1.5rem;color:#49a6e9;background:transparent;transition:var(--transition);cursor:pointer;border:none;transition:transform .3s ease}.nav-toggle:hover{transform:rotate(90deg)}.links{height:0;overflow:hidden;transition:var(--transition)}.show-links{height:15rem}.links li{cursor:pointer;padding:10px;color:var(--clr-grey-3);font-size:15px;text-transform:capitalize;letter-spacing:var(--spacing);display:block;padding:.5rem 1rem;transition:var(--transition)}.links li:hover{background:var(--clr-grey-3);color:#fff;padding-left:1.5rem}@media screen and (min-width: 800px){.nav-center{max-width:1170px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:1rem}.nav-header{padding:0}.nav-toggle{display:none}.links{height:auto;display:flex}.links a{padding:0;margin:0 .5rem}.links a:hover{padding:0;background:transparent}}.header{background-attachment:fixed;background-image:url(/assets/art-535ca68e.jpg);background-size:cover;background-repeat:no-repeat;height:100vh;width:100%;margin:auto}.header .section-center{padding-top:15rem;text-align:center;opacity:0;animation:fadeIn 4s ease forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.header .section-center h1{font-family:Work-sans;color:#fff}.header .section-center p{color:#6d757e}.header .section-center button{background:transparent;color:#6d757e}.header .section-center button:hover{background-color:#fff}#about{padding:80px;margin-right:2rem}.center{text-align:center}.row{display:flex;justify-content:space-between;flex-wrap:wrap}.about-col-1{display:none}.about-col-2{max-width:100%}.sub-title{font-size:60px;font-weight:600;color:#fff;text-align:center}.about-col-2 p{color:#6d757e;text-align:center}.tab-container{width:110%;background:transparent;padding:2rem;border-radius:30px;box-shadow:0 5px 15px #0003}.tab-titles{display:flex;margin:10px 0}.tab-links{margin-right:50px;font-size:14px;font-weight:500;cursor:pointer;position:relative;color:#fff}.tab-links:after{content:"";width:0;height:3px;background:#fff;position:absolute;left:0;bottom:-8px;transition:.5s}.tab-links.tab-active:after{width:50%}.tab-content{display:none}.tab-content. active-tab{display:block}.tab-content ul li{font-size:10px;color:#6d757e;list-style:None;margin:8px 0}.tab-content.active-tab{display:block}.tab-content ul li span{color:;font-size:14px}@media screen and (min-width: 800px){.about-col-1{display:block;flex-basis:50%}.about-col-2{flex-basis:50%}.about-col-1 img{width:75%}.about-col-2 p,.sub-title{text-align:left}.tab-container{width:65%}.tab-content. active-tab{align-items:center}}@media screen and (max-width: 400px){#about{padding:80px 8px}.tab-container{margin-left:10px;width:100%}}.js-proficiency-section{margin-top:15px;display:flex;align-items:center}.js-image{max-width:30px;margin-right:20px}.progress-bar{width:100px;height:5px;background-color:#fff;overflow:hidden}.progress2{height:100%;background-color:#49a6e9;transition:width 1s}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.css-proficiency-section{margin-top:15px;display:flex;align-items:center}.css-image{max-width:30px;margin-right:20px}.progress-container{display:flex;align-items:center;justify-content:center}.progress-bar{width:100px;height:5px;background-color:#ccc;border-radius:10px;overflow:hidden}.progress{width:0;height:100%;background-color:#49a6e9;animation:progress 2s ease-in-out}.counter{font-size:10px;margin-left:10px;color:var(--clr-primary-5)}@keyframes progress{0%{width:0}to{width:60%}}.section-p1{padding:40px 50px;background:#fff url(/assets/art-535ca68e.jpg);background-attachment:fixed;background-size:contain}.sub2,#product1{text-align:center}#product1 .pro-container{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}#product1 .pro{background:transparent;height:auto;width:105%;padding:10px;border-radius:25px;cursor:pointer;border:2px solid var(--clr-primary-10);box-shadow:20px 20px 30px #0003;margin:15px 0;transition:.2s}#product1 .pro img{width:100%;height:10rem;border-radius:20px}#product1 .pro .des{display:flex;align-items:center;justify-content:space-around;padding-top:0}.btn2{color:#14dbe7;font-size:7px;font-weight:800;width:5rem}.btn2:hover{color:#fff;background:#14dbe7}.basebtn{text-align:center;color:#14dbe7;font-weight:800;background-color:transparent;width:20rem;height:2rem;border-radius:10px;border:2px solid var(--clr-primary-10);animation:pounce 2s ease-in-out infinite;cursor:pointer}@keyframes pounce{0%,to{transform:scale(.9)}50%{transform:scale(1)}}.basebtn:hover{background:#fff}@media screen and (min-width: 800px){#product1 .pro .des{padding-top:20px}#product1 .pro-container{margin-left:120px;grid-template-columns:repeat(3,1fr);grid-gap:60px;width:80%}#product .pro{height:17rem;width:15rem;padding:10px 20px}}@media screen and (max-width: 450px){.section-p1{padding:40px}#product1 .pro-container{margin-right:25px;grid-gap:40px}#product1 .pro{width:120%}.btn2{letter-spacing:.15rem;text-align:center;font-size:3px;width:3.5rem}#product1 .pro img{width:100%;height:7rem}}@media screen and (max-width: 380px){.section-p1{padding-left:35px}#product1 .pro-container{margin-right:50px;grid-gap:30px}#product1 .pro{width:110%}.btn2{letter-spacing:.15rem;text-align:center;font-size:3px;width:3.5rem}#product1 .pro img{width:%;height:7rem}}footer{background:#080808;padding:5rem 1rem}footer p{color:var(--clr-white);text-align:center;text-transform:capitalize;letter-spacing:var(--spacing);margin-bottom:0}.top-link{font-size:1.25rem;position:fixed;bottom:3rem;right:3rem;background:transparent;width:2rem;height:2rem;display:grid;place-items:center;border:2px solid var(--clr-primary-10);border-radius:var(--radius);color:#49a6e9;animation:bounce 2s ease-in-out infinite;z-index:100}@keyframes bounce{0%{transform:scale(1)}50%{transform:scale(1.5)}to{transform:scale(1)}}