:root{--main-color: #00adb5;--black-color: #222831;--gray-color: #393e46;--light-color: #eeeeee;--main-font: "Roboto Condensed", sans-serif;--border-r: 15px;--section-m-b: 3em}*{margin:0;padding:0;box-sizing:border-box;font-family:var(--main-font)}html{scroll-behavior:smooth}body{background-color:var(--light-color)}.container{width:85%;margin:0 auto;max-width:100%}@media (max-width: 767px){.container{width:100%;padding:0 1em}}@media (min-width: 768px) and (max-width: 991px){.container{width:90%;padding:0 1em}}@media (min-width: 992px) and (max-width: 1199px){.container{width:95%;padding:0 1em}}header{width:100%;position:sticky;top:0;left:0;display:flex;align-items:center;justify-content:space-around;background-color:var(--black-color);padding:1em 0;box-shadow:1px 1px 5px #00000086;z-index:5}@media (max-width: 767px){header{width:100%;justify-content:space-around}}header .logo{width:3em}@media (max-width: 767px){header .logo{width:2em}}header nav .nav-bar{padding:0 1em;font-size:1.7em;color:var(--light-color);cursor:pointer;opacity:.5;position:relative}@media (max-width: 767px){header nav .nav-bar{padding:0 .5em;font-size:1.5em}}header nav .nav-bar:hover{color:var(--main-color);opacity:1;transition:all .5s ease-out}header nav .nav-bar:hover:after{position:absolute;bottom:-3em;left:50%;transform:translate(-50%,-50%);background-color:var(--light-color);color:var(--black-color);font-size:.6em;padding:.2em;border-radius:5px;width:100%;text-align:center}header nav .nav-bar:first-of-type:hover:after{content:"Home"}header nav .nav-bar:nth-of-type(2):hover:after{content:"About me"}header nav .nav-bar:nth-of-type(3):hover:after{content:"Portfolio"}header nav .nav-bar:nth-of-type(4):hover:after{content:"Contact"}header nav .nav-bar:nth-of-type(5):hover:after{content:"Services"}header .active{color:var(--main-color);opacity:1}button{width:100%;padding:1em 1.5em;border:none;font-size:1.1em;text-transform:uppercase;cursor:pointer;transition:.5s}.main-but{background-color:var(--main-color);color:var(--light-color)}.main-but:hover,.sub-but{background-color:var(--black-color);color:var(--main-color)}.sub-but:hover{background-color:var(--main-color);color:var(--light-color)}.download-but{background-color:var(--main-color);padding:0}.download-but a{text-decoration:none;color:var(--light-color);width:100%;display:flex;align-items:center;justify-content:center;padding:1rem .3rem}.download-but a:hover{color:var(--main-color)}.download-but:hover{background-color:var(--black-color)}.sub-download-but{background-color:var(--black-color);padding:0}.sub-download-but a{text-decoration:none;color:var(--light-color);width:100%;display:flex;align-items:center;justify-content:center;padding:1rem .3rem}.sub-download-but a:hover{color:var(--main-color)}.sub-download-but:hover{background-color:var(--light-color);color:var(--main-color)}.title{display:flex;align-items:center;justify-content:center;width:100%;margin-bottom:3em}@media (max-width: 767px){.title{margin-bottom:1.5em}}@media (min-width: 768px) and (max-width: 991px){.title{margin-bottom:2em}}.title h2{font-size:3em;color:var(--light-color);text-transform:uppercase}@media (max-width: 767px){.title h2{font-size:2em;text-align:center}}.title h2 span{color:var(--main-color)}.about-me-section{width:100%;background-color:var(--black-color);padding:var(--section-m-b) 0}.about-me-section .container{display:flex;flex-direction:row;align-items:center;justify-content:space-between}@media (max-width: 767px){.about-me-section .container{flex-direction:column}}@media (min-width: 768px) and (max-width: 991px){.about-me-section .container{flex-direction:column;gap:2em}}.about-me-section .container .personal-info{width:50%}@media (max-width: 767px){.about-me-section .container .personal-info{width:100%}}@media (min-width: 768px) and (max-width: 991px){.about-me-section .container .personal-info{width:100%}}.about-me-section .container .personal-info h3{font-size:1.7em;margin-bottom:1em;color:var(--light-color)}@media (max-width: 767px){.about-me-section .container .personal-info h3{font-size:1em}}.about-me-section .container .personal-info .all-infos{width:100%;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}.about-me-section .container .personal-info .all-infos .info{width:100%;margin-bottom:.5em;display:flex;align-items:center;justify-content:space-between}@media (max-width: 767px){.about-me-section .container .personal-info .all-infos .info{flex-direction:column}}.about-me-section .container .personal-info .all-infos .info p{font-size:1.3em;color:var(--main-color);width:fit-content;width:50%;text-transform:capitalize}@media (max-width: 767px){.about-me-section .container .personal-info .all-infos .info p{font-size:1em;width:100%;margin-bottom:.5em}}.about-me-section .container .personal-info .all-infos .info p span{color:var(--light-color);text-transform:none}.about-me-section .container .years-of-exp{width:50%;display:flex;align-items:center;justify-content:center;gap:1em}@media (max-width: 767px){.about-me-section .container .years-of-exp{justify-content:space-between;width:100%}}@media (min-width: 768px) and (max-width: 991px){.about-me-section .container .years-of-exp{width:100%;justify-content:flex-start}}.about-me-section .container .years-of-exp .data{border:1px solid rgba(128,128,128,.453);padding:2em 1.5em}@media (max-width: 767px){.about-me-section .container .years-of-exp .data{padding:1em}}.about-me-section .container .years-of-exp .data h2{color:var(--light-color);font-size:2.5em}@media (max-width: 767px){.about-me-section .container .years-of-exp .data h2{font-size:1.5em}}.about-me-section .container .years-of-exp .data h2 span{color:var(--main-color)}.about-me-section .container .years-of-exp .data p{margin-left:1em;color:var(--main-color);position:relative}@media (max-width: 767px){.about-me-section .container .years-of-exp .data p{font-size:.8em}}.about-me-section .container .years-of-exp .data p:before{content:"";width:1em;height:2px;background-color:var(--light-color);position:absolute;top:50%;left:-1.5em}.hero{width:100%;background-image:linear-gradient(to right,var(--gray-color) 50%,var(--light-color) 50%);height:100vh}@media (max-width: 767px){.hero{background-image:linear-gradient(to top,var(--black-color) 30%,var(--light-color) 70%);height:100%;padding:0 0 var(--section-m-b)}}@media (min-width: 768px) and (max-width: 991px){.hero{background-image:linear-gradient(to top,var(--gray-color) 30%,var(--light-color) 70%);height:100%;padding:0 0 var(--section-m-b)}}.hero .container{display:flex;align-items:center;justify-content:space-between;flex-direction:row}@media (max-width: 767px){.hero .container{flex-direction:column;padding-top:7em}}@media (min-width: 768px) and (max-width: 991px){.hero .container{padding-top:7em}}.hero .container .img-side{width:50%;height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column}@media (max-width: 767px){.hero .container .img-side{width:100%;height:100%;margin-bottom:2em}}@media (min-width: 768px) and (max-width: 991px){.hero .container .img-side{width:30%;height:max-content}}.hero .container .img-side .wrapper{background-color:var(--black-color);width:50%}@media (max-width: 767px){.hero .container .img-side .wrapper{width:70%;height:100%}}@media (min-width: 768px) and (max-width: 991px){.hero .container .img-side .wrapper{width:100%}}.hero .container .img-side .wrapper img{width:100%}.hero .container .img-side .button-wrapper{width:50%;display:flex;align-items:center;justify-content:center}@media (max-width: 767px){.hero .container .img-side .button-wrapper{width:70%;flex-direction:column}}@media (min-width: 768px) and (max-width: 991px){.hero .container .img-side .button-wrapper{width:100%;flex-direction:column}}.hero .container .img-side .button-wrapper button{max-width:50%}@media (max-width: 767px){.hero .container .img-side .button-wrapper button{max-width:100%}}@media (min-width: 768px) and (max-width: 991px){.hero .container .img-side .button-wrapper button{max-width:100%}}.hero .container .info{width:50%;height:100vh;display:flex;align-items:flex-start;justify-content:center;flex-direction:column;padding-left:5em}@media (max-width: 767px){.hero .container .info{width:100%;justify-content:flex-start;padding:0;height:100%}}@media (min-width: 768px) and (max-width: 991px){.hero .container .info{width:70%;height:max-content}}.hero .container .info h1{color:var(--main-color);font-size:4em;text-align:left;margin-bottom:.5em}@media (max-width: 767px){.hero .container .info h1{font-size:2em;color:var(--main-color);text-align:center}}@media (min-width: 768px) and (max-width: 991px){.hero .container .info h1{font-size:2.5em;color:var(--black-color)}}.hero .container .info p{font-weight:400;line-height:2;margin-bottom:1em;font-size:1.2em;text-align:justify}@media (max-width: 767px){.hero .container .info p{width:100%;color:var(--light-color);font-size:1em}}@media (min-width: 768px) and (max-width: 991px){.hero .container .info p{width:100%;color:var(--light-color)}}.hero .container .info i{color:var(--black-color)}@media (max-width: 767px){.hero .container .info i{color:var(--main-color)}}@media (min-width: 768px) and (max-width: 991px){.hero .container .info i{color:var(--main-color)}}.skills{padding:var(--section-m-b);width:100%;background-color:var(--gray-color)}@media (max-width: 767px){.skills{padding:1em}}.skills .container{display:flex;align-items:center;justify-content:center;flex-direction:column}.skills .container .skills{width:100%;background-color:var(--light-color);border-radius:var(--border-r);display:grid;grid-template-columns:repeat(auto-fit,minmax(9em,1fr));gap:3em}@media (max-width: 767px){.skills .container .skills{grid-template-columns:repeat(auto-fit,minmax(7em,1fr));gap:1em}}@media (min-width: 768px) and (max-width: 991px){.skills .container .skills{grid-template-columns:repeat(auto-fit,minmax(8em,1fr));gap:1em}}.skills .container .skills .skill{width:100%;cursor:pointer}.skills .container .skills .skill .skill-logo{background-color:#dedede;margin-bottom:1em;padding:1.5em 1em;display:flex;align-items:center;justify-content:center;border-radius:var(--border-r)}.skills .container .skills .skill .skill-logo img{width:80%}.skills .container .skills .skill .name-level{width:100%;background-color:#dedede;border-radius:var(--border-r);position:relative}.skills .container .skills .skill .name-level h4{text-align:center;text-transform:uppercase;padding:.5em 1em}.skills .container .skills .skill .name-level .level{position:absolute;top:0;left:0;background-color:var(--main-color);padding:.5em 1em;border-radius:var(--border-r);color:var(--light-color);text-align:center;display:none;animation:moving .5s}.skills .container .skills .skill:hover .level{display:block}.skills .container .skills .skill:hover .name-level h4{opacity:0}@keyframes moving{0%{width:0;opacity:0}to{opacity:1}}.portfolio{width:100%;padding:var(--section-m-b) 0}@media (max-width: 767px){.portfolio{padding:1em}}.portfolio .container{overflow-x:hidden;display:flex;flex-direction:column;align-items:flex-start}.portfolio .container .title h2{color:var(--black-color)}.portfolio .container .all-projects{width:max-content;display:flex;align-items:center;justify-content:flex-start;height:50vh;margin-bottom:1em;flex-wrap:nowrap;animation:slider 30s infinite linear alternate}@media (max-width: 767px){.portfolio .container .all-projects{height:25vh;margin-left:0}}@media (min-width: 768px) and (max-width: 991px){.portfolio .container .all-projects{height:30vh}}@media (min-width: 992px) and (max-width: 1199px){.portfolio .container .all-projects{height:30vh}}.portfolio .container .all-projects:hover{animation-play-state:paused}.portfolio .container .all-projects .project{cursor:pointer;margin-right:.5em;position:relative;height:50vh;max-width:630px}@media (max-width: 767px){.portfolio .container .all-projects .project{height:25vh}}@media (min-width: 768px) and (max-width: 991px){.portfolio .container .all-projects .project{height:30vh}}@media (min-width: 992px) and (max-width: 1199px){.portfolio .container .all-projects .project{height:30vh}}.portfolio .container .all-projects .project:hover .links{position:absolute;top:0;left:0;z-index:2;width:100%;height:50vh;background-color:#00000047;display:flex;align-items:center;justify-content:center}@media (max-width: 767px){.portfolio .container .all-projects .project:hover .links{height:25vh}}@media (min-width: 768px) and (max-width: 991px){.portfolio .container .all-projects .project:hover .links{height:30vh}}@media (min-width: 992px) and (max-width: 1199px){.portfolio .container .all-projects .project:hover .links{height:30vh}}.portfolio .container .all-projects .project:hover .links a{color:var(--light-color);text-decoration:none;padding:1.2em 1em;text-align:center;margin-right:1em;text-transform:capitalize;font-weight:400}.portfolio .container .all-projects .project:hover .links a:hover{background-color:var(--black-color);color:var(--main-color)}.portfolio .container .all-projects .project:hover .links .web-link,.portfolio .container .all-projects .project:hover .links .git-link{width:20%;background-color:var(--main-color)}.portfolio .container .all-projects .project img{width:100%;height:50vh}@media (max-width: 767px){.portfolio .container .all-projects .project img{height:25vh}}@media (min-width: 768px) and (max-width: 991px){.portfolio .container .all-projects .project img{height:30vh}}@media (min-width: 992px) and (max-width: 1199px){.portfolio .container .all-projects .project img{height:30vh}}.portfolio .container .all-projects .project .links{display:none}.portfolio .container .pages-but{width:30%;align-self:center}@media (max-width: 767px){.portfolio .container .pages-but{width:100%}}@keyframes slider{10%{transform:translate(0)}90%{transform:translate(-90%)}to{transform:translate(-90%)}}@media (min-width: 768px) and (max-width: 991px){@keyframes slider{10%{transform:translate(0)}98%{transform:translate(-94%)}to{transform:translate(-94%)}}}@media (max-width: 767px){@keyframes slider{10%{transform:translate(0)}98%{transform:translate(-95%)}to{transform:translate(-95%)}}}.edu-trn{width:100%;background-color:var(--black-color);padding:var(--section-m-b) 0}.edu-trn .container{display:flex;flex-direction:row;align-items:center;justify-content:center}.edu-trn .container .edc,.edu-trn .container .trn{display:flex;flex-direction:column;gap:2em;width:100%}.edu-trn .container .edc .edc-info,.edu-trn .container .edc .trn-info,.edu-trn .container .trn .edc-info,.edu-trn .container .trn .trn-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(20em,1fr));gap:2em}@media (max-width: 767px){.edu-trn .container .edc .edc-info,.edu-trn .container .edc .trn-info,.edu-trn .container .trn .edc-info,.edu-trn .container .trn .trn-info{grid-template-columns:repeat(auto-fit,minmax(20em,1fr));gap:1em}}.edu-trn .container .edc .edc-info .info,.edu-trn .container .edc .trn-info .info,.edu-trn .container .trn .edc-info .info,.edu-trn .container .trn .trn-info .info{margin-bottom:1.5em;padding:0 0 .5em 2em;width:100%}.edu-trn .container .edc .edc-info .info b,.edu-trn .container .edc .trn-info .info b,.edu-trn .container .trn .edc-info .info b,.edu-trn .container .trn .trn-info .info b{color:var(--light-color);font-weight:400;padding:.5em;background-color:var(--gray-color);border-radius:10px;margin-bottom:1em;display:inline-block}@media (max-width: 767px){.edu-trn .container .edc .edc-info .info b,.edu-trn .container .edc .trn-info .info b,.edu-trn .container .trn .edc-info .info b,.edu-trn .container .trn .trn-info .info b{font-size:.8em;padding:.5em .8em}}.edu-trn .container .edc .edc-info .info h2,.edu-trn .container .edc .trn-info .info h2,.edu-trn .container .trn .edc-info .info h2,.edu-trn .container .trn .trn-info .info h2{color:var(--light-color);font-size:1.5em;font-weight:400;margin-bottom:.5em;position:relative}@media (max-width: 767px){.edu-trn .container .edc .edc-info .info h2,.edu-trn .container .edc .trn-info .info h2,.edu-trn .container .trn .edc-info .info h2,.edu-trn .container .trn .trn-info .info h2{font-size:1.2em}}.edu-trn .container .edc .edc-info .info h2 i,.edu-trn .container .edc .trn-info .info h2 i,.edu-trn .container .trn .edc-info .info h2 i,.edu-trn .container .trn .trn-info .info h2 i{position:absolute;top:1rem;left:-2rem;font-size:1em;color:var(--main-color);transform:translate(-50%,-50%);background-color:var(--gray-color);border-radius:50%;padding:.2em;display:flex;align-items:center;justify-content:center}@media (max-width: 767px){.edu-trn .container .edc .edc-info .info h2 i,.edu-trn .container .edc .trn-info .info h2 i,.edu-trn .container .trn .edc-info .info h2 i,.edu-trn .container .trn .trn-info .info h2 i{left:-1.3em;top:.8rem}}.edu-trn .container .edc .edc-info .info h2 span,.edu-trn .container .edc .trn-info .info h2 span,.edu-trn .container .trn .edc-info .info h2 span,.edu-trn .container .trn .trn-info .info h2 span{color:var(--main-color)}.edu-trn .container .edc .edc-info .info p,.edu-trn .container .edc .trn-info .info p,.edu-trn .container .trn .edc-info .info p,.edu-trn .container .trn .trn-info .info p{color:var(--light-color);text-transform:capitalize}@media (max-width: 767px){.edu-trn .container .edc .edc-info .info p,.edu-trn .container .edc .trn-info .info p,.edu-trn .container .trn .edc-info .info p,.edu-trn .container .trn .trn-info .info p{font-size:.8em}}.edu-trn .container .edc .trn-info,.edu-trn .container .trn .trn-info{grid-template-columns:repeat(auto-fit,minmax(20em,1fr));gap:2em}@media (max-width: 767px){.edu-trn .container .edc .trn-info,.edu-trn .container .trn .trn-info{gap:0}}.edu-trn hr{height:2px;width:80%;margin:2em auto;border:none;background-color:var(--main-color);opacity:.5}.get-in-touch{background:var(--gray-color);width:100%;padding:var(--section-m-b) 0}.get-in-touch .container{display:flex;flex-direction:row;align-items:center;justify-content:space-between}@media (max-width: 767px){.get-in-touch .container{flex-direction:column-reverse;gap:2em}}@media (min-width: 768px) and (max-width: 991px){.get-in-touch .container{flex-direction:column-reverse;gap:2em}}.get-in-touch .container .info{width:50%;display:flex;align-items:flex-start;flex-direction:column}@media (max-width: 767px){.get-in-touch .container .info{width:100%}}@media (min-width: 768px) and (max-width: 991px){.get-in-touch .container .info{width:100%}}.get-in-touch .container .info h3{color:var(--light-color);margin-bottom:.5em;font-size:2em}.get-in-touch .container .info>p{color:var(--light-color);margin-bottom:1em;width:70%;line-height:1.5;font-size:1.2em}@media (max-width: 767px){.get-in-touch .container .info>p{width:100%}}@media (min-width: 768px) and (max-width: 991px){.get-in-touch .container .info>p{width:100%}}.get-in-touch .container .info .contact-info{display:flex;align-items:flex-start;flex-direction:column}.get-in-touch .container .info .contact-info section{display:flex;align-items:flex-start;margin-bottom:1em}.get-in-touch .container .info .contact-info section svg{color:var(--main-color);margin-right:1em;font-size:1.3em}.get-in-touch .container .info .contact-info section .data h5{color:var(--main-color);text-transform:uppercase;margin-bottom:.5em;font-size:1em}.get-in-touch .container .info .contact-info section .data p{color:var(--light-color);font-size:1.2em}.get-in-touch .container .info .s-m{display:flex;align-items:center;justify-content:flex-start;width:50%;margin-top:1em}@media (max-width: 767px){.get-in-touch .container .info .s-m{width:100%}}@media (min-width: 768px) and (max-width: 991px){.get-in-touch .container .info .s-m{width:100%}}.get-in-touch .container .info .s-m a{width:3em;height:3em;text-decoration:none;border-radius:50%;background-color:gray;display:flex;align-items:center;justify-content:center;margin-right:1em}.get-in-touch .container .info .s-m a:hover{border:2px solid var(--main-color)}.get-in-touch .container .info .s-m a:hover svg{color:var(--main-color)}.get-in-touch .container .info .s-m a:first-of-type svg{font-size:1em}.get-in-touch .container .info .s-m a svg{font-size:1.2em;height:1.5em;color:#fff}.get-in-touch .container form{width:50%;display:flex;align-items:flex-start;justify-content:center;flex-direction:column}@media (max-width: 767px){.get-in-touch .container form{width:100%}}@media (min-width: 768px) and (max-width: 991px){.get-in-touch .container form{width:100%}}.get-in-touch .container form .your-info{width:100%;display:flex;gap:1em}.get-in-touch .container form input,.get-in-touch .container form textarea{width:100%;margin-bottom:.5em;padding:1em;border:none;background-color:var(--black-color);color:var(--light-color);resize:none;font-size:1em;border-radius:10px}.get-in-touch .container form input:focus,.get-in-touch .container form textarea:focus{border:none;outline:none}.get-in-touch .container form button{background-color:var(--main-color);color:var(--light-color);font-weight:800;border-radius:10px}.get-in-touch .container form button:hover{background-color:var(--light-color);color:var(--black-color)}.get-in-touch .container form button svg{margin-right:1em}.services{width:100%;padding:var(--section-m-b) 0}.services .container .title h2{color:var(--gray-color)}.services .container .service-wrapper{display:grid;grid-template-columns:repeat(auto-fit,minmax(20em,1fr));gap:3em;width:100%}@media (max-width: 767px){.services .container .service-wrapper{gap:1.5em}}.services .container .service-wrapper .service-card{display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;width:100%;background-color:var(--gray-color);border-radius:var(--border-r);box-shadow:0 -7px 9px #2e2e2e24;overflow:hidden}.services .container .service-wrapper .service-card:hover img{transform:scale(1.2)}.services .container .service-wrapper .service-card .img-wrapper{width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:var(--light-color)}.services .container .service-wrapper .service-card .img-wrapper img{width:50%;transition:all .5s}.services .container .service-wrapper .service-card .info{border-top:4px solid var(--main-color);color:var(--light-color);padding:1.5em 1.5em 1em;z-index:2}.services .container .service-wrapper .service-card .info h3{margin-bottom:1em;text-transform:uppercase;color:var(--main-color)}.services .container .service-wrapper .service-card .info p{width:100%;line-height:1.5}.about-me-page{padding-top:6em;background-color:var(--black-color)}.portfolio-page{width:100%;padding-top:6em;background-color:var(--gray-color)}@media (min-width: 768px) and (max-width: 991px){.portfolio-page{padding:1em 0}}.portfolio-page .container{padding-top:3.5em;display:flex;align-items:center;justify-content:center;flex-direction:column;padding-bottom:3em}.portfolio-page .container .all-projects{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(20em,1fr));gap:2em}@media (max-width: 767px){.portfolio-page .container .all-projects{gap:1em}}@media (max-width: 1200px){.portfolio-page .container .all-projects{grid-template-columns:repeat(auto-fit,minmax(18em,1fr))}}.portfolio-page .container .all-projects .project{width:100%;position:relative;box-shadow:1px 1px 5px #00000086;border-radius:var(--border-r)}.portfolio-page .container .all-projects .project:hover .links{position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;background-color:#00000047;display:flex;align-items:center;justify-content:center;border-radius:var(--border-r)}.portfolio-page .container .all-projects .project:hover .links a{color:var(--light-color);text-decoration:none;padding:1em .8em;text-align:center;margin-right:1em;text-transform:capitalize;font-weight:400}.portfolio-page .container .all-projects .project:hover .links a:hover{background-color:var(--black-color);color:var(--main-color)}.portfolio-page .container .all-projects .project:hover .links .web-link,.portfolio-page .container .all-projects .project:hover .links .git-link{width:30%;background-color:var(--main-color)}.portfolio-page .container .all-projects .project img{width:100%;height:100%;border-radius:var(--border-r)}.portfolio-page .container .all-projects .project .links{display:none}.contact-page{padding-top:6em;background-color:var(--gray-color)}.service-page{padding-top:6em;background-color:var(--light-color)}