/*======== Variables css ========*/
:root{
   /**Colors**/
   --black: #040404;
   --white: #fff;
   --color-link: #ba49e7;
}
/*======== Base ========*/
body{
   font-family: "Open Sans", sans-serif;
   background-color: var(--black);
   color: var(--white);
   position: relative;
   background: transparent;
}
body::before{
   content: "";
   position: fixed;
   background: var(--black) url('../img/hero.jpg') top right no-repeat;
   background-size: cover;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: center;
   left: 0;
   right: 0;
   top: 0;
   height: 100vh;
   z-index: -1;
}
html{
   overflow-x: hidden;
   scroll-behavior: smooth;
   scroll-padding-top: 2rem ;
}
html::-webkit-scrollbar{
   width: 0.3rem;
}
html::-webkit-scrollbar-track{
   background: black;
}
html::-webkit-scrollbar-thumb{
   background-color: var(--color-link);
   border-radius: 5rem;
}
/*======== Media queries ========*/ 
@media (min-width: 1024px){
   body::before{
      background-attachment: fixed;
   }
} 

a {
   color: var(--color-link);
   text-decoration: none;
}
a:hover{
   color: var(--color-link);
   text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
   font-family: "Raleway", sans-serif;
}

/*======== Header ========*/
.header{
   transition: ease-in-out 0.3s;
   position: relative;
   height: 100vh;
   display: flex;
   align-items: center;
   z-index: 997;
   overflow-y: auto;
}
.header *{
   transition: ease-in-out 0.3s;
}
.header__title{
   font-size: 48px;
   margin: 0;
   padding: 0;
   line-height: 1;
   color: var(--white);
   font-weight: 700;
   font-family: "Poppins", sans-serif;
}
.header h1 a:hover {
   color: #fff;
   line-height: 1;
   display: inline-block;
 }
.header__subtitle{
   font-size: 24px;
   margin-top: 10px;
   color: rgba(255, 255, 255, 0.8);
   font-weight: 500;
}
.header__subtitle--span{
   color: var(--white);
   border-bottom: 2px solid var(--color-link);
}
/*======== Social Links ========*/
.social-links{
   margin-top: 40px;
   display: flex;
}
.social-links a{
   font-size: 16px;
   display: flex;
   justify-content: center;
   align-items: center;
   background: rgba(255, 255, 255, 0.1);
   color: var(--white);
   line-height: 1;
   margin-right: 8px;
   border-radius: 50%;
   width: 40px;
   height: 40px;
}
.social-links a:hover{
   background: var(--color-link);
}

/*======== Media queries ========*/
@media (max-width: 992px){
   .header__title{
      font-size: 36px;
   }
   .web-dev{
      display: block;
   }
   .header__subtitle{
      font-size: 20px;
      line-height: 20px;
   }
   .social-links{
      margin-top: 15px;
   }
   .container{
      display: flex;
      flex-direction: column;
      align-items: center;
   }
}

/* Header Top */
.header.header-top {
   height: 70px;
   position: fixed;
   left: 0;
   top: 0;
   right: 0;
   background: rgba(0, 0, 0, 0.9);
}

.header.header-top .social-links, #header.header-top h2 {
   display: none;
}
 
.header.header-top .header__title{
   margin-right: auto;
   font-size: 30px;
}
 
.header.header-top .container {
   display: flex;
   align-items: center;
   justify-content: space-between;
}
 
.header.header-top .navbar {
   margin: 0;
}

@media (max-width: 768px) {
   .header.header-top {
     height: 60px;
     margin: auto;
   }
   .web-dev{
      font-size: 15px;
   }
   .header.header-top h1 {
     font-size: 26px;
   }
 
}

@media (max-width: 450px) {
   .header.header-top {
     height: 80px;
     margin: auto;
   }
   .web-dev{
      font-size: 15px;
   }
   .header.header-top h1 {
     font-size: 10px;
   }
   .greeting{
      display: none;
   }
}
 
.header__wave{
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100px;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/*======== Desktop Navigation ========*/
.navbar{
   padding: 0;
   margin-top: 35px;
}
.navbar ul{
   margin: 0;
   padding: 0;
   display: flex;
   list-style: none;
   align-items: center;
}
.navbar li{
   position: relative;
}
.navbar li + li {
   margin-left: 30px;
}
.navbar a, .navbar a:focus{
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0;
   font-family: "Poppins", sans-serif;
   font-size: 16px;
   font-weight: 400;
   color: rgba(255, 255, 255, 0.7);
   white-space: nowrap;
   transition: 0.3s;
}
.navbar a i, .navbar a:focus i {
   font-size: 12px;
   line-height: 0;
   margin-left: 5px;
}
.navbar a:before {
   content: "";
   position: absolute;
   width: 0;
   height: 2px;
   bottom: -4px;
   left: 0;
   background-color:var(--color-link);
   visibility: hidden;
   width: 0px;
   transition: all 0.3s ease-in-out 0s;
 }
 .navbar a:hover:before, .navbar li:hover > a:before, .navbar .active:before {
   visibility: visible;
   width: 25px;
}
.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {
   color: #fff;
 }
/*======== Mobil Navigation ========*/
.mobile-nav-toggle{
    color: var(--white);
    font-size: 28px;
    cursor: pointer;
    display: none;
    line-height: 0;
    transition: 0.5s;
    position: fixed;
    right: 15px;
    top: 15px;
}

@media (max-width: 991px) {
   .mobile-nav-toggle {
     display: block;
   }
   .navbar ul {
     display: none;
   }
}
.navbar-mobile {
   position: fixed;
   overflow: hidden;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.9);
   transition: 0.3s;
   z-index: 999;
   margin-top: 0;
}
.navbar-mobile .mobile-nav-toggle {
   position: absolute;
   top: 15px;
   right: 15px;
}
.navbar-mobile ul {
   display: block;
   position: absolute;
   top: 55px;
   right: 15px;
   bottom: 45px;
   left: 15px;
   padding: 10px 0;
   overflow-y: auto;
   transition: 0.3s;
   border: 2px solid rgba(255, 255, 255, 0.2);
}
.navbar-mobile li {
   padding: 12px 20px;
 }
 
 .navbar-mobile li + li {
   margin: 0;
 }
 
 .navbar-mobile a {
   font-size: 16px;
   position: relative;
 }

 /*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section{
   overflow: hidden;
   position: absolute;
   width: 100%;
   top: 140px;
   bottom: 100%;
   opacity: 0;
   transition: ease-in-out 0.4s;
   z-index: 2;
}
section.section-show {
   top: 100px;
   bottom: auto;
   opacity: 1;
   padding-bottom: 45px;
}
section .container {
   background: rgba(0, 0, 0, 0.9);
   padding: 30px;
}
@media (max-width: 768px) {
   section {
     top: 120px;
   }
   section.section-show {
     top: 80px;
   }
}
.section-title h2 {
   font-size: 14px;
   font-weight: 500;
   padding: 0;
   line-height: 1px;
   margin: 0 0 20px 0;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: #aaaaaa;
   font-family: "Poppins", sans-serif;
}
.section-title h2::after {
   content: "";
   width: 120px;
   height: 1px;
   display: inline-block;
   background: var(--color-link);
   margin: 4px 10px;
}
.section-title p {
  margin: 0;
  margin: -15px 0 15px 0;
  font-size: 36px;
  font-weight: 700;
  text-transform: uppercase;
  font-family: "Poppins", sans-serif;
  color: #fff;
}
/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about-me .content h3{
   font-weight: 700;
   font-size: 26px;
   color: var(--color-link);
}
.about-me .content ul {
   list-style: none;
   padding: 0;
}
.about-me .content ul li {
   margin-bottom: 20px;
   display: flex;
   align-items: center;
}
.about-me .content ul strong {
   margin-right: 10px;
}
.about-me .content ul i {
   font-size: 16px;
   margin-right: 5px;
   color: var(--color-link);
   line-height: 0;
}
.about-me .content p:last-child {
   margin-bottom: 0;
}
/*--------------------------------------------------------------
# Skills
--------------------------------------------------------------*/
.skills-container{
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   justify-content: center;
   align-items: center;
   text-align: center;
   grid-gap: 1rem;
   padding: 0 80px 0 80px;
   font-size: 1.2rem;
}
.title-skills h2{
   margin-bottom: 0;
}
.kills-box{
   padding: 1rem;
   color: #ddd;
   cursor: pointer;
}
.skill-title{
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 0.5rem;
   margin-bottom: 0.5rem;
   position: relative;
}
.skill-title h3{
   margin: 0.5rem 0 0 0;
   font-size: 20px;
   cursor: pointer;
}
.skill-title:after{
   content: '';
   position: absolute;
   bottom: 0;
   right: 50%;
   width: 0;
   height: 2px;
   border-radius: 2px 0 0 2px;
   background-color: var(--color-link);
   transition: .5s;
}
.skill-title:before{
   content: '';
   position: absolute;
   bottom: 0;
   left: 50%;
   width: 0;
   height: 2px;
   border-radius: 0 2px 2px 0;
   background-color: var(--color-link);
   transition: .5s;
}
.skill-title:hover:after{
   width: 35px;
}
.skill-title:hover:before{
   width: 35px;
}
.skill-title:hover .img{
   transform: translateY(-10px);
}
/* .skill-img{
   width: 90px;
   height: 90px;
   position: relative;
   border-radius: 45px;
   display: flex;
   background: rgba(255, 255, 255, 0.08);
   justify-content: center;
   text-align: center;
} */
.img{
   width: 50px;
   cursor: pointer;
}

@media screen and (max-width: 500px){
   .skills-container{
      grid-template-columns: repeat(3,1fr);
      padding: 2rem 50px;
   }
}
/*--------------------------------------------------------------
# Interests
--------------------------------------------------------------*/
.interests .icon-box {
   display: flex;
   align-items: center;
   padding: 20px;
   background: rgba(255, 255, 255, 0.08);
   transition: ease-in-out 0.3s;
}
.interests .icon-box i {
   font-size: 32px;
   padding-right: 10px;
   line-height: 1;
}
.interests .icon-box h3 {
   font-weight: 700;
   margin: 0;
   padding: 0;
   line-height: 1;
   font-size: 16px;
   color: #fff;
}
.interests .icon-box:hover {
   background: rgba(255, 255, 255, 0.12);
   cursor: pointer;
}
/*--------------------------------------------------------------
# Resume
--------------------------------------------------------------*/
.resume .resume-title {
   font-size: 26px;
   font-weight: 700;
   margin-top: 20px;
   margin-bottom: 20px;
   color: #fff;
   display: flex;
}
/*btn curriculum*/
.btn-curriculum{
   /* position: relative; */
   color: var(--white);
   background: var(--color-link);
   padding: 0.3rem;
   border-radius: 4px;
   font-size: 12px;
}
.btn-curriculum i{
   font-size: 13px;
   margin-right: 3px;
}
.btn-curriculum:hover{
   color: var(--black);
}

/*end btn-curriculun*/
.resume .resume-item {
  padding: 0 0 20px 20px;
  margin-top: -2px;
  border-left: 2px solid rgba(255, 255, 255, 0.2);
  position: relative;
}
.resume .resume-item h4 {
   line-height: 18px;
   font-size: 18px;
   font-weight: 600;
   text-transform: uppercase;
   font-family: "Poppins", sans-serif;
   color: var(--color-link);
   margin-bottom: 10px;
}
.resume .resume-item h5 {
   font-size: 16px;
   background: rgba(255, 255, 255, 0.15);
   padding: 5px 15px;
   display: inline-block;
   font-weight: 600;
   margin-bottom: 10px;
}
.resume .resume-item ul {
   padding-left: 20px;
}
.resume .resume-item ul li {
   padding-bottom: 10px;
}
.resume .resume-item:last-child {
   padding-bottom: 0;
}
.resume .resume-item::before {
   content: "";
   position: absolute;
   width: 16px;
   height: 16px;
   border-radius: 50px;
   left: -9px;
   top: 0;
   background: #ba49e7;
   border: 2px solid #ba49e7;
}
.bi-download{
   margin-right: 10px;
   font-size: 1rem;   
}
/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
.portfolio .portfolio-item {
   margin-bottom: 30px;
}
.portfolio .portfolio-wrap {
  transition: 0.3s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  background: rgba(0, 0, 0, 0.6);
}
.portfolio .portfolio-wrap::before {
   content: "";
   background: rgba(0, 0, 0, 0.6);
   position: absolute;
   left: 30px;
   right: 30px;
   top: 30px;
   bottom: 30px;
   transition: all ease-in-out 0.3s;
   z-index: 2;
   opacity: 0;
}
.portfolio .portfolio-wrap .portfolio-info {
   opacity: 0;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   text-align: center;
   z-index: 3;
   transition: all ease-in-out 0.3s;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}
.portfolio .portfolio-wrap .portfolio-info::before {
   display: block;
   content: "";
   width: 48px;
   height: 48px;
   position: absolute;
   top: 35px;
   left: 35px;
   border-top: 3px solid #fff;
   border-left: 3px solid #fff;
   transition: all 0.5s ease 0s;
   z-index: 9994;
}
.portfolio .portfolio-wrap .portfolio-info::after {
   display: block;
   content: "";
   width: 48px;
   height: 48px;
   position: absolute;
   bottom: 35px;
   right: 35px;
   border-bottom: 3px solid #fff;
   border-right: 3px solid #fff;
   transition: all 0.5s ease 0s;
   z-index: 9994;
}
.portfolio .portfolio-wrap .portfolio-info h4 {
   font-size: 20px;
   color: #fff;
   font-weight: 600;
}
.portfolio .portfolio-wrap .portfolio-info p {
   color: #ffffff;
   font-size: 14px;
   text-transform: uppercase;
   padding: 0;
   margin: 0;
}
.portfolio .portfolio-wrap .portfolio-links {
   text-align: center;
   z-index: 4;
}
.portfolio .portfolio-wrap .portfolio-links a {
   color: #fff;
   margin: 0 2px;
   font-size: 28px;
   display: inline-block;
   transition: 0.3s;
}
.portfolio .portfolio-wrap .portfolio-links a:hover {
   color: #ba49e7;
}
.portfolio .portfolio-wrap:hover::before {
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   opacity: 1;
}
.portfolio .portfolio-wrap:hover .portfolio-info {
   opacity: 1;
}
.portfolio .portfolio-wrap:hover .portfolio-info::before {
   top: 15px;
   left: 15px;
}
.portfolio .portfolio-wrap:hover .portfolio-info::after {
   bottom: 15px;
   right: 15px;
}
/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info-box {
   color: #444444;
   padding: 20px;
   width: 100%;
   background: rgba(255, 255, 255, 0.08);
}
.contact .info-box i.bx {
   font-size: 24px;
   color: #ba49e7;
   border-radius: 50%;
   padding: 14px;
   float: left;
   background: rgba(255, 255, 255, 0.1);
}
.contact .info-box h3 {
   font-size: 20px;
   color: rgba(255, 255, 255, 0.5);
   font-weight: 700;
   margin: 10px 0 8px 68px;
}
.contact .info-box p {
   padding: 0;
   color: #fff;
   line-height: 24px;
   font-size: 14px;
   margin: 0 0 0 68px;
}
.contact .info-box .social-links {
   margin: 5px 0 0 68px;
   display: flex;
}


.contact .php-email-form {
   padding: 30px;
   background: rgba(255, 255, 255, 0.08);
}
.contact .php-email-form .error-message {
   display: none;
   background: rgba(255, 255, 255, 0.08);
   background: #ed3c0d;
   text-align: left;
   padding: 15px;
   font-weight: 600;
}
.contact .php-email-form .error-message br + br {
   margin-top: 25px;
}
.contact .php-email-form .sent-message {
   display: none;
   background: rgba(255, 255, 255, 0.08);
   background: #ba49e7;
   text-align: center;
   padding: 15px;
   font-weight: 600;
}
.contact .php-email-form .loading {
   display: none;
   background: rgba(255, 255, 255, 0.08);
   text-align: center;
   padding: 15px;
}
.contact .php-email-form .loading:before {
   content: "";
   display: inline-block;
   border-radius: 50%;
   width: 24px;
   height: 24px;
   margin: 0 10px -6px 0;
   border: 3px solid #ba49e7;
   border-top-color: #eee;
   -webkit-animation: animate-loading 1s linear infinite;
   animation: animate-loading 1s linear infinite;
}
.contact .php-email-form input, .contact .php-email-form textarea {
   border-radius: 0;
   box-shadow: none;
   font-size: 14px;
   background: rgba(255, 255, 255, 0.08);
   border: 0;
   transition: 0.3s;
   color: #fff;
}
.contact .php-email-form input:focus, .contact .php-email-form textarea:focus {
   background-color: rgba(255, 255, 255, 0.11);
}
.contact .php-email-form input::-webkit-input-placeholder, .contact .php-email-form textarea::-webkit-input-placeholder {
   color: rgba(255, 255, 255, 0.3);
   opacity: 1;
}
.contact .php-email-form input::-moz-placeholder, .contact .php-email-form textarea::-moz-placeholder {
   color: rgba(255, 255, 255, 0.3);
   opacity: 1;
}
.contact .php-email-form input::placeholder, .contact .php-email-form textarea::placeholder {
   color: rgba(255, 255, 255, 0.3);
   opacity: 1;
 }
 
 .contact .php-email-form input {
   padding: 10px 15px;
 }
 
 .contact .php-email-form textarea {
   padding: 12px 15px;
}
 
 .contact .php-email-form button[type="submit"] {
   background: #ba49e7;
   border: 0;
   padding: 10px 30px;
   color: #fff;
   transition: 0.4s;
   border-radius: 4px;
}
 
 .contact .php-email-form button[type="submit"]:hover {
   background: #ba49e7;
}
 
 @-webkit-keyframes animate-loading {
   0% {
     transform: rotate(0deg);
   }
   100% {
     transform: rotate(360deg);
   }
}
 
 @keyframes animate-loading {
   0% {
     transform: rotate(0deg);
   }
   100% {
     transform: rotate(360deg);
   }
}
/*--------------------------------------------------------------
# Credits
--------------------------------------------------------------*/
.credits {
   position: fixed;
   right: 0;
   left: 0;
   bottom: 0;
   padding: 15px;
   text-align: right;
   font-size: 13px;
   color: #fff;
   z-index: 999999;
 }
 .download{
    display: block;
    font-size: 11px;
 }
 .download i{
    margin-left: 2px;
    font-size: 12px;
 }
 @media (max-width: 992px) {
   .credits {
     text-align: center;
     padding: 10px;
     background: rgba(0, 0, 0, 0.8);
   }
 }
 
 .credits a {
   color: #ba49e7;
   transition: 0.3s;
 }
 
 .credits a:hover {
   color: #fff;
 }