@import"https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap";@import"https://fonts.googleapis.com/css2?family=Oleo+Script+Swash+Caps&display=swap";@import"https://fonts.googleapis.com/css2?family=Montserrat&display=swap";*{margin:0;padding:0}body{font-family:Montserrat,sans-serif}::-webkit-scrollbar{display:none}.head{position:-webkit-sticky;position:sticky;top:0;z-index:2}.head .heading{font-family:Russo One,sans-serif;font-size:36px;z-index:88;padding-top:1rem}.head .heading span{color:#f87008}.head .line{width:100px;height:5px;background:teal}button{cursor:pointer;background:none;border:none}.card,.info,.intro,.sidebar,.tabs,li,ul{display:flex;align-items:center;justify-content:space-between}.layout{position:relative;display:flex;justify-content:space-between;height:100vh}.left{flex:1 1;height:100vh;background:#f1f5f8}.left .sidebar{position:-webkit-sticky;position:sticky;top:0;left:0;height:100%;flex-direction:column;justify-content:space-around;box-shadow:0 0 10px rgba(54,54,54,.263)}.left .sidebar .header .logo{height:80px;width:200px}.left .sidebar ul{list-style:none;flex-direction:column;align-items:flex-start;gap:1rem}.left .sidebar ul li{cursor:pointer;font-size:24px;gap:1rem;font-weight:700;color:teal}.left .sidebar ul li:hover{border-bottom:1px solid #f87008}.left .sidebar ul .active{color:#f87008;border-left:5px solid teal}.left .sidebar .footer{text-align:center}.right{flex:4 1;height:100vh}.right .contact,.right .intor,.right .portfolio,.right .services{height:100vh;padding:0 2rem}.right .intro{padding:3rem}.right .intro .desc{flex:1 1}.right .intro .desc h2{font-size:24px;margin-bottom:1rem}.right .intro .desc h2 span{font-weight:700;color:teal;font-family:Oleo Script Swash Caps,cursive}.right .intro .desc h3{font-size:36px}.right .intro .desc h3 span{color:#f87008}.right .intro .desc p{color:#444;margin-top:2rem;font-weight:300}.right .intro .desc .btns{margin-top:2rem}.right .intro .desc .btns button{padding:.5rem 3rem;border-radius:2rem;font-size:18px;font-weight:bolder;color:#555}.right .intro .desc .btns button:first-child{border:1px solid teal;color:teal}.right .intro .desc .btns button:first-child:hover{background:teal;color:#fff}.right .intro .desc .btns button:last-child{border:1px solid #f87008;color:#f87008;margin-left:1rem}.right .intro .desc .btns button:last-child:hover{background:#f87008;color:#fff}.right .intro .desc .socialMedia{margin-top:2rem}.right .intro .desc .socialMedia span{display:flex;align-items:center;gap:1rem;margin-top:.5rem}.right .intro .desc .socialMedia span .linkedin{font-size:24px;color:#093a84}.right .intro .desc .socialMedia span .facebook{font-size:24px;color:#0c96db}.right .intro .desc .socialMedia span .behance{font-size:30px;color:#079f8b}.right .intro .img{flex:1 1}.right .intro .img img{width:100%;height:500px;object-fit:cover;border-radius:40%;border-bottom:5px solid #f87008}.right .portfolio{overflow:scroll;position:relative}.right .portfolio .title{position:-webkit-sticky;position:sticky;top:0;padding-bottom:.5rem;z-index:1;background:#fff}.right .portfolio .title h3{font-size:24px;text-align:center;margin-bottom:10px}.right .portfolio .title .tabs{gap:1rem;justify-content:center}.right .portfolio .title .tabs button{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:1rem}.right .portfolio .title .tabs button:first-child{border:.1rem solid #b802bb;color:#b802bb}.right .portfolio .title .tabs button:first-child:hover{background:#b802bb}.right .portfolio .title .tabs button:nth-child(2){border:.1rem solid teal;color:teal}.right .portfolio .title .tabs button:nth-child(2):hover{background:teal}.right .portfolio .title .tabs button:nth-child(3){border:.1rem solid #f87008;color:#f87008}.right .portfolio .title .tabs button:nth-child(3):hover{background:#f87008}.right .portfolio .title .tabs button:last-child{border:.1rem solid #d8df04;color:#d8df04}.right .portfolio .title .tabs button:last-child:hover{background:#d8df04}.right .portfolio .title .tabs button:hover{color:#fff}.right .portfolio .title .tabs .active0,.right .portfolio .title .tabs .active1,.right .portfolio .title .tabs .active2,.right .portfolio .title .tabs .active3,.right .portfolio .title .tabs .active4{color:#fff!important}.right .portfolio .title .tabs .active0{background:#b802bb}.right .portfolio .title .tabs .active1{background:teal}.right .portfolio .title .tabs .active2{background:#f87008}.right .portfolio .title .tabs .active3{background:red}.right .portfolio .title .tabs .active4{background:#d8df04;color:#d8df04}.right .portfolio .projects{display:grid;grid-template-columns:1fr 1fr;grid-column-gap:2rem;column-gap:2rem;padding:2%;transition:all .5s ease-in-out}.right .portfolio .projects .project{margin-bottom:2rem;position:relative;border-radius:.2rem;overflow:hidden}.right .portfolio .projects .project img{width:100%;height:100%}.right .portfolio .projects .project .info{background:linear-gradient(245deg,rgba(11,205,223,.714),rgba(0,0,0,.769));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:absolute;top:0;left:0;width:100%;height:100%;flex-direction:column;justify-content:center;color:#e6e0e0;opacity:0;transition:all 1s ease-in-out}.right .portfolio .projects .project .info h3{text-transform:uppercase}.right .portfolio .projects .project .info .tools{padding:1rem .5rem}.right .portfolio .projects .project .info .tools .text{text-align:center;color:#0fec59;font-weight:700;margin-bottom:5px}.right .portfolio .projects .project .info .tools .tool{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap}.right .portfolio .projects .project .info .tools .tool span{border:.5px solid #e4dede;padding:2px 5px;border-radius:20px;color:#ded8d4;font-size:14px;margin-bottom:5px}.right .portfolio .projects .project .info .links{display:flex;align-items:center;justify-content:space-between;gap:2rem}.right .portfolio .projects .project .info .links a{display:flex;align-items:center;justify-content:center;gap:.2rem;font-size:18px;color:#d7b5a8}.right .portfolio .projects .project .info .links a:hover{color:red}.right .portfolio .projects .project .info:hover{opacity:1}.right .portfolio .projects .project:hover{box-shadow:5px 5px 20px hsla(0,0%,43%,.624)}.right .portfolio .projects .project .uiDesign{position:relative}.right .portfolio .projects .project .uiDesign .uiImg{height:300px;object-fit:cover}.right .portfolio .projects .project .uiDesign .overlay{width:100%;height:100%;position:absolute;top:0;opacity:0;z-index:99;background:rgba(0,0,0,.443);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:all .8s ease-in-out;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1rem}.right .portfolio .projects .project .uiDesign .overlay .uiBtn{background:#f87008;border-radius:.2rem;color:#fff;font-size:1rem;text-transform:uppercase;padding:.5rem 1rem;display:flex;align-items:center;gap:1rem}.right .portfolio .projects .project .uiDesign .overlay .uiBtn .eyeIcon{font-size:20px}.right .portfolio .projects .project .uiDesign:hover .overlay{opacity:1}.right .portfolio .uiFullScreen{position:absolute;padding:1rem;top:0;left:0;z-index:99}.right .portfolio .uiFullScreen img{width:100%;height:100%;overflow:hidden;object-fit:contain;border:2px solid #f87008}.right .portfolio .uiFullScreen .closeBtn{position:fixed;top:1.5rem;right:1.5rem;color:#fff;background:red;padding:5px 10px;font-weight:700;border-radius:5px}.right .services .service{margin-top:2rem;display:grid;grid-template-columns:1fr 1fr 1fr;grid-gap:2rem;gap:2rem}.right .services .service .card{box-shadow:0 0 5px #add8e6;justify-content:center;flex-direction:column;padding:1rem 0;text-align:center;color:#fff}.right .services .service .card .logo{width:50px;height:50px;border-radius:50%;background:#f87008;display:flex;align-items:center;justify-content:center;transition:all 1s ease-in-out}.right .services .service .card .logo .icon{font-size:30px;color:#fff}.right .services .service .card h3{color:teal;font-size:18px;margin-top:1rem}.right .services .service .card p{margin:.5rem .2rem;color:#777;font-size:14px}.right .services .service .card:hover .logo{background:#fff}.right .services .service .card:hover .icon,.right .services .service .card:hover h3{color:#f87008}.right .services .service .card h5{color:#444;text-transform:uppercase;text-decoration:underline;margin-bottom:5px}.right .services .service .card ul{flex-direction:column;align-items:flex-start;color:#666}.right .contact{background:url(https://images.unsplash.com/photo-1607799279861-4dd421887fb3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80) 50%;background-repeat:no-repeat;background-size:cover}.right .contact .box{display:grid;grid-template-columns:1fr 1fr 1fr;grid-column-gap:1rem;column-gap:1rem;margin-top:16%}.right .contact .box .card{display:flex;flex-direction:column;justify-content:center;align-items:center;border:1px solid #f87008;background:rgba(0,0,0,.313);-webkit-backdrop-filter:blur(.2rem);backdrop-filter:blur(.2rem);padding:2rem 1rem}.right .contact .box .card span{font-size:24px;color:#fff;font-weight:700}.right .contact .box .card .icon{font-size:64px;color:#f87008;margin-bottom:2rem}.right .contact .note{width:100%;background:#f87008;border-radius:10px;margin-top:2rem}.right .contact .note p{text-align:center;color:hsla(0,0%,100%,.744);padding:1rem;display:flex;align-items:center;gap:2rem;font-size:24px}.darkModeIcon{position:fixed;right:1%;top:3%;width:40px;height:40px;border-radius:50%;z-index:3;display:flex;align-items:center;justify-content:center;transition:all 1s ease-in-out;animation:mymove 6s linear infinite}@keyframes mymove{0%{opacity:1}25%{opacity:.5}50%{opacity:0}75%{opacity:.5}to{opacity:1}}.darkModeIcon .dayIcon,.darkModeIcon .nightIcon{font-size:30px;cursor:pointer;color:#fff}.darkModeIcon .nightIcon{color:teal}.darkModeIcon .dayIcon{color:#f87008}.hamburger{display:none;position:fixed;right:5px;top:5px;z-index:4}.hamburger .icon{font-size:30px}@media(max-width:477px){.layout{height:auto}.layout .left{display:none}.layout .openSidebar{display:block;position:fixed;z-index:9999;height:100%;width:70%}.layout .right,.layout .right .contact,.layout .right .intro,.layout .right .portfolio,.layout .right .services{height:auto}.layout .right .portfolio{height:100%}.layout .right .portfolio .title{margin-bottom:2rem}.layout .right .portfolio .title .tabs button{font-size:12px;flex-direction:column;border-radius:0;padding:2px 5px;margin:0;gap:0}.layout .right .portfolio .projects{display:grid;grid-template-columns:1fr;padding:0}.layout .right .portfolio .projects .project .info h3{font-size:14px;font-weight:300}.layout .right .portfolio .projects .project .info .tools{padding:10px}.layout .right .portfolio .projects .project .info .tools .text,.layout .right .portfolio .projects .project .info .tools .tool span{font-size:12px}.layout .right .portfolio .projects .project .info a{font-size:14px}.layout .right .intro{padding:0 10px;height:100vh}.layout .right .intro .img{display:none}.layout .right .intro .desc{margin:0}.layout .right .service{grid-template-columns:1fr}.layout .right .contact{height:100vh}.layout .right .contact .box{grid-template-columns:1fr}.layout .right .contact .box .card{padding:1rem;margin-bottom:1rem}.layout .right .contact .box .card .icon{font-size:36px}.darkModeIcon{right:1%;top:6%;width:30px;height:30px}.darkModeIcon .icon{font-size:24px}.hamburger{display:block}}