*{padding:0;margin:0;box-sizing:border-box;font-family:Advent Pro,sans-serif;transition:.3s ease}html{scroll-behavior:smooth}a{text-decoration:none}li{list-style:none}.flex{display:flex;align-content:center}.grid{display:grid;align-content:center}input,textarea{font-size:100%}.section{padding:4rem 0 2rem}.container{padding-left:1.5rem;padding-right:1.5rem}img{height:auto;width:100%}.icon{font-size:25px;cursor:pointer}.btn{border:2px solid var(--primaryColor);padding:.5rem 1.5rem;font-size:1.1rem;font-weight:600;position:relative;color:var(--gradient-text);background:transparent}.btn:before{content:"";height:100%;width:0%;background:var(--primaryColor);position:absolute;top:0;left:0;z-index:-1;transition:.2s}.btn:after{content:"";height:100%;width:0%;background:var(--BgColor);position:absolute;top:0;left:0;z-index:-1;transition:.5s}.btn:hover:before,.btn:hover:after{width:100%}.navLink{position:relative}.navLink:before{content:"";position:absolute;background:var(--primaryColor);height:2px;width:0%;bottom:-3px;left:0;transition:.3s}.navLink:after{content:"";position:absolute;background:var(--projectCardColor);height:2px;width:0%;bottom:-3px;left:0;transition:.8s}.sectionTitle{padding:1rem 0;font-size:2.3rem;color:var(--gradient-text);display:flex;align-content:center}.section_subtitle{font-size:1.3rem}.titleNumber{color:var(--primaryColor);margin:0 .6rem;font-weight:600}.titleText{position:relative;width:max-content;padding-bottom:1rem}.underline{position:absolute;left:0;width:100%;height:3px;top:35px;border-radius:10px;background:var(--primaryColor);overflow:hidden}.underline span{top:0;left:10px;height:100%;width:10px;border-radius:10px;position:absolute;background:var(--textColor);animation:moveLine 2s linear infinite}@keyframes moveLine{0%{left:-20px}to{left:100px}}body{background:var(--BgColor);color:#fff}::-weblit-scrollbar{width:10px;background:var(--projectCardColor)}::-webkit-scrollbar-thumb{background:var(--primaryHover);border-radius:10px}@media screen and (min-width: 769px){.container{width:90%;margin:auto}}@media screen and (min-width: 960px){.section{padding:4rem 0}}@media screen and (min-width: 1240px){.section{padding:4rem 0}.container{width:90%;margin:auto}}@media screen and (min-width: 2560px){body{zoom:1.7}}.about .sectionTitle{padding-bottom:2rem}.about .sectionContent .textSection{display:flex;flex-direction:column}.about .sectionContent .textSection h4{color:var(--secondaryColor);font-size:1.1rem;max-width:100%;letter-spacing:1px;font-weight:500;margin:auto}.about .sectionContent .textSection p{font-size:.8rem;letter-spacing:1px;font-style:italic;padding-bottom:1rem;line-height:1.2rem}.about .sectionContent .textSection .aboutBtn{align-self:center;display:flex;align-items:center;justify-content:center;margin-top:.5rem;background:var(--primaryColor);width:max-content;padding:10px 15px;border-radius:15px}.about .sectionContent .textSection .aboutBtn:hover{background:var(--secondaryColor)}.about .sectionContent .textSection .aboutBtn a{color:var(--projectCardColor);font-size:1.2rem;font-weight:600;cursor:pointer;gap:.5rem}.about .sectionContent .textSection .aboutBtn a:hover{color:var(--textColor)}.about .sectionContent .aboutImgDiv{position:relative;width:250px;height:250px;margin:2rem auto 3rem;border-radius:50%;overflow:hidden;display:grid;border:2px dashed var(--primaryColor)}@media screen and (min-width: 769px){.about{width:90%;margin:auto}.about .sectionContent .textSection .aboutBtn{align-self:flex-start;margin-top:2rem}.aboutImgDiv{display:none!important}}@media screen and (min-width: 960px){.about .sectionContent{display:flex;justify-content:center;margin:auto}}@media screen and (min-width: 1240px){.about .sectionContent .textSection p{font-size:.8rem;padding:0 0 1rem;font-style:italic;letter-spacing:2px}.about .sectionContent .textSection h4{font-size:1.2rem;line-height:1.5rem}.about .sectionContent .aboutImgDiv{width:300px;height:300px;margin:0 auto 3rem}}.contact .contactContainer{width:100%;justify-content:center;align-items:flex-start;gap:2rem}.contact .contactContainer .socialContacts{justify-content:center}.contact .contactContainer .socialContacts h3{color:var(--secondaryColor);padding:1rem 0;text-align:center}.contact .contactContainer .socialContacts .card{display:grid;align-items:center;row-gap:10px;padding:1.5rem;width:240px;background:var(--projectCardColor);border-radius:10px;text-align:center}.contact .contactContainer .socialContacts .card .icon{color:var(--primaryColor)}.contact .contactContainer .socialContacts .card h4{color:var(--textColor);font-size:18px}.contact .contactContainer .socialContacts .card a{justify-content:center;gap:5px;color:var(--primaryColor);font-weight:600;cursor:pointer}.contact .contactContainer .socialContacts .card a .icon{font-size:20px}.contact .contactContainer .socialContacts .card a:hover{color:var(--primaryColor)}.contact .contactContainer .socialContacts .card a:hover .icon{transform:translate(10px)}.contact .contactContainer .form{width:100%;justify-content:center;margin:auto}.contact .contactContainer .form h3{text-align:center;color:var(--secondaryColor)}.contact .contactContainer .form form{width:100%;text-align:center}.contact .contactContainer .form form input,.contact .contactContainer .form form textarea{height:1rem;width:90%;padding:1.5rem .5rem;border-radius:10px;background:none;border:2px solid var(--secondaryColor);margin:.5rem 0;outline:none;color:var(--textColor);font-weight:600}.contact .contactContainer .form form input::placeholder,.contact .contactContainer .form form textarea::placeholder{color:var(--secondaryColor);opacity:.5}.contact .contactContainer .form form textarea{height:150px}.contact .contactContainer .form form .formBtn{display:block;margin:auto;width:90%;border:none;border-radius:10px;font-size:18px;padding:1rem 0;background:var(--primaryColor);color:var(--BgColor);font-weight:600;cursor:pointer}.contact .contactContainer .form form .formBtn:hover{background:var(--secondaryColor)}@media screen and (min-width: 640px){.socialContacts .card{row-gap:14px;padding:2.5rem}.socialContacts .card .icon{font-size:45px}}@media screen and (min-width: 960px){.contact .contactContainer{grid-template-columns:2 1fr;align-items:flex-start!important}}:root{--primaryColor: #00eaff;--primaryHover: hsl(185, 92%, 41%);--secondaryColor: rgb(150, 162, 188);--paragraphColor: rgb(127, 127, 175);--BgColor: #031a30;--formColor: rgb(2, 15, 29);--projectCardColor: #072340;--textColor: #dae4fb;--headerHeight: 3rem}.footer{width:100%;text-align:center;background:var(--projectCardColor);margin-top:1rem;padding:1rem 0}.footer span{text-align:center;color:var(--secondaryColor);opacity:.5;font-size:15px}.home{background:url(/assets/Portfolio_mobile-f01d6924.png) no-repeat center/cover}.home .homeContainer{padding:5rem 1.5rem}.home .homeContainer .introText{font-size:1.1rem;color:var(--primaryColor);font-weight:600;letter-spacing:1px;filter:drop-shadow(0px 7px 6px var(--BgColor))}.home .homeContainer .title{font-size:4.2rem;color:#fff;padding:.7rem 0}.home .homeContainer .subTitle{display:block;font-size:1.5rem;font-weight:600;color:var(--secondaryColor);line-height:2rem}.home .homeContainer .subTitle .frontendDeveloper{color:var(--primaryColor)}.home .homeContainer .homeParagraph{padding:.6rem 1rem;font-size:.9rem;letter-spacing:1px;font-style:italic;color:#fff;padding:1rem 0;filter:drop-shadow(0px 7px 6px var(--BgColor))}.home .leftIcons,.home .rightEmail{display:none}.home .lowerHomeSection{padding-top:2.5rem}.home .lowerHomeSection .contactBtn{padding:.6rem 1rem;background:var(--primaryColor);border:none;border-radius:15px;outline:none}.home .lowerHomeSection .contactBtn:hover{background:var(--BgColor);color:var(--primaryColor)}.home .lowerHomeSection .contactBtn a{font-size:16px;font-weight:600;gap:.5rem;align-items:center;color:var(--BgColor)}.home .lowerHomeSection .contactBtn a:hover{color:var(--primaryColor)}.home .lowerHomeSection .scrollDiv{padding-top:3rem;display:flex;justify-content:center;align-items:center}.home .lowerHomeSection .scrollDiv .scroll{font-size:1.2rem;color:var(--primaryColor)}.home .lowerHomeSection .scrollDiv .icon{font-size:1.3rem;margin-left:.6rem;padding-top:.2rem;color:var(--primaryColor);animation:move .5s infinite}@keyframes move{0%{transform:translateY(5px)}25%{transform:translateY(0)}50%{transform:translateY(5px)}to{transform:translateY(0)}}@media screen and (min-width: 480px){.home .homeContainer{padding:5rem 1.5rem}.home .homeContainer .scrollDiv{padding-top:4rem}.home .homeContainer .scrollDiv .icon{font-size:1.3rem}}@media screen and (min-width: 770px){.home{background:url(/assets/AirBrush_20230919143526-76ff873a.jpg) no-repeat center/cover}.home .homeContainer{display:flex;flex-direction:column;align-items:flex-end;width:80%;margin:auto;padding:5rem 0}.home .homeContainer .scrollDiv{padding-top:2rem}}@media screen and (min-width: 1040px){.home .homeContainer{padding:8rem 0 6rem}.home .homeContainer .introText{font-size:1.8rem}.home .homeContainer .title{font-size:5.5rem}.home .homeContainer .subTitle{line-height:2.5rem;font-size:2.6rem}.home .homeContainer .homeParagraph{font-size:1rem;letter-spacing:1px;color:#fff;font-style:italic}}@media screen and (min-width: 1390px){.home{padding:16rem 0 4rem}.home .homeContainer{padding:0 0 12rem 6rem}.home .homeContainer .introText{font-size:2rem}.home .homeContainer .title{font-size:6.5rem}.home .homeContainer .subTitle{line-height:2.5rem;font-size:2.8rem}.home .homeContainer .lowerHomeSection{padding-top:2rem}}.header{position:fixed;display:flex;align-items:center;justify-content:space-between;width:100%;height:var(--headerHeight);padding:2rem;z-index:1000;background:rgba(0,0,0,.1)}.header .logo a{color:var(--textColor);font-weight:600;cursor:pointer}.header .logo a img{width:1.8rem;height:auto}@media screen and (max-width: 768px){.header .logoDiv .logo a img{width:1.4rem;height:auto}.header .navBar{background:var(--projectCardColor);position:absolute;height:max-content;width:80%;border-radius:1rem;padding:1rem;top:-100rem;left:50%;transform:translate(-50%);box-shadow:0 2px 4px #020f1de7;z-index:1000}.header .navBar .navLists{display:flex;align-items:center;justify-content:center;flex-direction:column;margin:auto;padding:1rem 0}.header .navBar .navLists .navItem{padding:1rem 0}.header .navBar .navLists .navItem .navLink{color:var(--primaryColor);font-size:1.3rem;font-weight:600}.header .navBar .navLists .navItem .navLink:hover{color:var(--primaryColor)}.header .navBar .navLists .btn{margin-top:1rem}.header .navBar .navLists .btn a{color:var(--textColor)}.header .navBar .closeNavBar{position:absolute;top:1rem;right:1.5rem}.header .navBar .closeNavBar:hover .icon{color:var(--primaryColor)}.header .activeNavbar{top:6rem}}.activeHeader{background-color:var(--projectCardColor);box-shadow:0 2px 4px #010f1de7}@media screen and (min-width: 769px){.toggleNavBar,.closeNavBar{display:none}.header{padding:2.5rem 2rem}.header .navLists{display:flex;align-items:center;justify-content:center;flex-direction:row;padding:0 1rem}.header .navLists .navItem{padding:0 1rem}.header .navLists .navItem .navLink{color:#fff;font-size:1.2rem;font-weight:600;filter:drop-shadow(0px 7px 6px var(--BgColor))}.header .navLists .navItem .navLink:hover{color:var(--primaryColor)}.header .navLists .btn{margin-left:1rem}.header .navLists .btn a{color:var(--primaryColor)}}@media screen and (min-width: 960px){.header{padding:2.5rem 5rem}.header .navBar .navLists,.header .navBar .navLists .navItem{padding:0 2rem}}.projects .flex{align-items:center;padding:1rem 0}.projects .flex .icon{color:var(--primaryColor);margin-right:1rem}.projects .modal{width:100%;height:100vh;position:fixed;top:30px;left:0;display:flex;justify-content:center;align-items:center;background-color:#000;transition:opacity .4s,visibility .4s ease,transform .5s ease-in-out;visibility:hidden;opacity:0;transform:scale(0);overflow:hidden;z-index:999}.projects .modal.open{visibility:visible;opacity:1;transform:scale(1)}.projects .modal img{width:auto;max-width:100%;height:auto;max-height:100%;display:block;line-height:0;box-sizing:border-box;padding:60px 0 40px;margin:0 auto;cursor:pointer}.projects .zoomIn{display:none;position:fixed;top:120px;right:10px;width:3rem;height:3rem;padding:5px;border-radius:50%;background:rgba(0,0,0,.2);color:#fff;cursor:pointer}.projects .zoomOut{display:none;position:fixed;top:180px;right:10px;width:3rem;height:3rem;padding:5px;border-radius:50%;background:rgba(0,0,0,.2);color:#fff;cursor:pointer}.projects .close{position:fixed;top:45px;right:25px;width:2.5rem;height:2.5rem;padding:5px;border-radius:50%;background:rgba(0,0,0,.2);color:#fff;cursor:pointer}.projects .galery{-webkit-column-count:1;-moz-column-count:1;column-count:1;-webkit-column-width:100%;-moz-column-width:100%;column-width:100%;padding:12px 0;overflow:hidden}.projects .galery .pics{-webkit-transition:all .35s ease;transition:all .35s ease;cursor:pointer;margin-bottom:12px}.projects .galery .pics:hover{filter:opacity(.8);transform:scale(1.03)}@media screen and (min-width: 769px){.projects{width:90%;margin:auto}.projects .modal.open .zoomIn,.projects .modal.open .zoomOut{display:flex}.projects .modal.open .close{width:3rem;height:3rem;top:55px;right:10px}.projects .galery{-webkit-column-count:2;-moz-column-count:2;column-count:2}}@media screen and (min-width: 1100px){.projects .galery{-webkit-column-count:3;-moz-column-count:3;column-count:3;-webkit-column-width:33%;-moz-column-width:33%;column-width:33%}}.skills .skillsContainer .groupTitle{color:var(--textColor);padding-top:1rem}.skills .skillsContainer .groupTitle .title{font-weight:300;letter-spacing:2px;font-size:1.2rem}.skills .skillsContainer .groupTitle .subtitle{display:block;padding:.3rem 0 1rem;color:var(--secondaryColor);font-weight:600}.skills .skillsContainer .generalSkills{display:grid;grid-template-columns:repeat(3,1fr);justify-content:center;align-items:center;gap:.5rem;padding-top:2rem}.skills .skillsContainer .generalSkills .singleSkill{display:flex;flex-direction:column;align-items:center;justify-content:center}.skills .skillsContainer .generalSkills .singleSkill .iconBox{position:relative;height:60px;width:60px;background:var(--projectCardColor);border:2px solid var(--secondaryColor);border-radius:3rem;justify-content:center;align-items:center;overflow:hidden;z-index:500}.skills .skillsContainer .generalSkills .singleSkill .iconBox .icon{font-size:25px}.skills .skillsContainer .generalSkills .singleSkill .iconBox:before{content:"";height:0;width:100%;background:var(--primaryHover);position:absolute;top:0;left:0;z-index:1;transition:.2s}.skills .skillsContainer .generalSkills .singleSkill .iconBox:after{content:"";height:0;width:100%;background:var(--BgColor);position:absolute;top:0;left:0;z-index:1;transition:.5s}.skills .skillsContainer .generalSkills .singleSkill .iconBox:hover{color:var(--textColor);border:2px solid var(--primaryColor)}.skills .skillsContainer .generalSkills .singleSkill .iconBox:hover .icon{color:var(--primaryColor)}.skills .skillsContainer .generalSkills .singleSkill .skillName{font-size:.8rem;padding:1rem;text-align:center;font-weight:600;color:var(--secondaryColor)}@media screen and (min-width: 480px){.skills .skillsContainer .skillGroup .generalSkills{grid-template-columns:repeat(3,1fr);gap:2.5rem}.skills .skillsContainer .skillGroup .generalSkills .skillName{font-size:1rem}}@media screen and (min-width: 760px){.generalSkills .iconBox{height:70px;width:70px}.generalSkills .iconBox .icon{font-size:28px}.generalSkills .skills .skillsContainer .skillGroup .generalSkills{grid-template-columns:repeat(5,1fr)}}@media screen and (min-width: 1240px){.skills .skillsContainer .skillGroup .generalSkills{grid-template-columns:repeat(5,1fr)}}:root{--primaryColor: #f196b3;--primaryHover: hsl(185, 92%, 41%);--secondaryColor: rgb(150, 162, 188);--paragraphColor: rgb(127, 127, 175);--BgColor: #031a30;--formColor: rgb(2, 15, 29);--projectCardColor: #072340;--textColor: #dae4fb;--headerHeight: 3rem;--gradient-text: linear-gradient(89.97deg, #ae67fa 1.84%, #f49867 102.67%)}