/*||||||||||||||| FONTS |||||||||||||||||*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Poppins:wght@600;900&family=Questrial&display=swap');

body{
    background-color: #171717;
    width: 100%;
}

.title{
    font-family: 'Poppins', sans-serif;
    font-weight: 900;
    color: #fff;
    margin-bottom: 0.5em;
}
.subTitle{
    font-family: 'Questrial', sans-serif;
    font-size: 3em;
    font-weight: 400;
    color: #fff;
    margin-bottom: 1em;
}
section{
    margin-bottom: 4em;
    margin-top: 4em;
}

/*||||||||||||||||||| NAVBAR ||||||||||||||||||||*/
.navbar{
    background-color: rgba(23, 23, 23, 0);
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

.nav-link:hover{
    color: #fff;
}
.navbar-brand{
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 2.1em;
    color: #fff;
}
.navbar-brand:hover{
    color: #fff;
}
.nav-link{
    margin: 0.2em 0 0 1em;
    color: #fff;
    font-family: 'Questrial', sans-serif;
    font-weight: 400;
    font-size: 18px;
}

.getButton{
    border: none;
    border-radius: 10px;
    background-color: #17BEBB;
    height: 2.8em;
    width: 7.8em;
    font-family: 'Questrial', sans-serif;
    font-size: 18px;
   text-align: center;
   color: #171717;
   padding-top: 0.7em;
   margin-left: 0;
}

#loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('../images/loader.gif') 50% 50% no-repeat rgb(11, 47, 63);
    opacity: .9;
}

/*||||||||||||||||| HEADER ||||||||||||||||||||||*/

.profileHeader{
    display: flex;
}
.profilePicture img{
   
    border-radius: 50%;
    border: 1px solid #282828;
}
.profileHeader p{
    font-family: 'Questrial', sans-serif;
    font-size: 1.25em;
    font-weight: 400;
    color: #fff;
}
.profileHeader button{
    border: none;
    border-radius: 10px;
    font-family: 'Questrial', sans-serif;
    font-size: 18px;
    color: #171717;
    width: 9.25em;
    height: 2.8em;
    background-color: #17BEBB;
}
#getButton{
    background-color: #C4C4C4;
    margin-left: 1em;
}

.buttonContainer{
    display: flex;
}

#title2{
    color: #17BEBB;
}

/*||||||||||||||||| ABOUT CONTAINER |||||||||||||||||*/

.aboutContainer{
    margin-top: 5%;
    margin-bottom: 5%;
}
.aboutContainer p{
    font-family: 'Questrial', sans-serif;
    font-weight: 400;
    color: #fff;
}
.aboutParagraf{
    padding: 2% 10% 0 10%;
    margin-bottom: 5%;
}

.aboutCircle{
    background-color: #212121;
    width: 3.87em;
    border-radius: 50%;
    padding: 25px;
    margin-bottom: 5%;
}
.aboutInnerCircle{
    background-color: #17BEBB;
    width: 0.75em;
    height: 0.75em;
    border-radius: 50%;
}
.infoContainer{
    width: 35em;
    display: flex;
    flex-direction: column;
    text-align: center;
    max-width: 100%;
   }
   .circleContainer{
    display: flex;
    justify-content: center;
    align-items: center;
}

/*|||||||||||||||||||| WHAT I DO |||||||||||||||||||||||*/

.whatContainer{
    display: flex;
    justify-content: center;
    margin-bottom: 5%;
}
.card{
    background-color: #171717;
    width: 21.8em;
    height: 15em;
}
.cardInner{
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s;
    cursor: pointer;   
}
#iDo1.isFlipped{
    transform: rotateY(180deg);
}

#iDo2.isFlipped{
    transform: rotateY(180deg);
}
#iDo3.isFlipped{
    transform: rotateY(180deg);
}
.cardFace{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.frontCard{
    position: absolute;
    display: flex;
    flex-direction: column;
    background-color: #282828;
    padding: 1em;
}
.cardFace p{
    font-family: 'Questrial', sans-serif;
    font-weight: 400;
    color:#C4C4C4;
    margin-top: 5%;
}
.backCard{
    background-image: linear-gradient( to bottom left, #504e4e, #171717 );
    transform: rotateY(180deg);
    padding: 1em;
}

.backCard p{
    text-decoration: underline;
    text-align: center;
}
.backCard ul{
    list-style: none;
    color: #C4C4C4;
    text-align: center;
    padding-left: 0;
   
}
.backCard li{
    border: 2px solid #17BEBB;
    border-radius: 5px;
    width: 6.3em;
    justify-content: center;
    display: inline-flex;
    margin: 2% 2% 0 0;
}

.lineColor{
    border-top: #17BEBB 3px solid;
    width: 25px;
}

.tap__here{
    position: absolute;
    margin-left: 60%;
    margin-top: 5%;
    display: none;
    transition-delay: 5s;
}
.tap__here img{
    width: 70%;
}

#web_tools{
    margin-bottom: 0px;
}

/*================ SKILLS ==================*/

.skillsInfo{
    display: grid;
    background-color: #282828;
    padding: 1em;
    border-radius: 10px;
    width: 50%;
}

.skills{
    margin: 1.5em 2em 1.5em 2em;
}
.skills h2{
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    color: #C4C4C4;
}
.skills h6{
    font-family: 'Questrial', sans-serif;
    font-weight: 900;
    color: #17BEBB;
    font-size: 3em;
}

/*|||||||||||||||||||| PROJECTS |||||||||||||||||*/
.projectsContainer{
    margin-top: 7%;
    margin-bottom: 5%;
}
.projectsContainer .title{
    margin-bottom: 5%;
}
.projectsInfo{
    display: flex;
    margin-bottom: 5%;
}

.projectsInfo h2{
    color: #17BEBB;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}
.projectsInfo h4{
    color: #C4C4C4;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}
.projectsInfo p{
    color: #C4C4C4;
    font-family: 'Poppins', sans-serif;
    font-size: 1em;
    font-weight: 400;
}
.projectsInfo button{
    background-color: #17BEBB;
    color: #171717;
    font-family: 'Questrial', sans-serif;
    font-size: 1.25em;
    font-weight: 400;
    border: none;
    width: 8em;
    height: 2.5em;
    border-radius: 10px;
    margin-top: 2em;
}
.webButton{
    margin-left: 0;
}
.projectsImage img{
    width: auto;
    max-width: 95%;
    height: auto;
    border-radius: 15px;
}
.projectsText{
    display: flex;
    flex-direction: column;
}

.formContainer{
    margin-bottom: 5%;
}
.formContainer .title{
    margin-bottom: 5%;
}

.form-floating{
    margin: 1em 0.3em 1em 0.3em;
   
}

label{
    color: #C4C4C4;
}

/*||||||||||||||||||||||| FORM ||||||||||||||||||||||||||*/
.form-control{
    background-color:  #171717!important;
    color: #C4C4C4;
    border-radius: 10px;
}
.form-control:valid {
    background-color:  #171717!important;
    color: #C4C4C4;
    border-radius: 10px;
  }
  .form-control:focus{
      outline: none;
      box-shadow: none;
  }
  #formButton{
      margin-top: 2em;
  }
  #formButton button{
    border: none;
    border-radius: 10px;
    background-color: #17BEBB;
    height: 2.8em;
    width: 7.8em;
    font-family: 'Questrial', sans-serif;
    font-size: 18px;
    font-weight: 400;
   text-align: center;
   color: #171717;
   align-items: center;
  }


  /*||||||||||||||||||  GO TO TOP BUTTON ||||||||||||||||||*/

  #topBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 25px;
    z-index: 99;
    width: 2.5em;
    height: 2.5em;
    border: none;
    outline: none;
    background-color: #17BEBB;
    color: #171717;
    cursor: pointer;
    padding: 11px;
    border-radius: 50%;
    font-size: 1.2em;
    font-family: 'Questrial', sans-serif;
    font-weight: 800;
  }
 

  /*||||||||||||||||||| WHATSAPP |||||||||||||||||*/
  #whatsappBtn{
    position: fixed;
    bottom: 18px;
    left: 25px;
    z-index: 99;
    cursor: pointer;
  }
  #whatsappBtn img{
    width: 3em;
  }

  /*||||||||||||||||||| FOOTER |||||||||||||||||*/

  footer{
      height: 4em;
  }
  footer h6{
      font-family: 'Poppins', sans-serif;
      color: #C4C4C4;
      font-size: 1.2em;
      font-weight: 600;
  }


  /*||||||||||||||||||| MEDIA QUERIES |||||||||||||||||||*/
  @media only screen and (min-width: 300px) {
     form{
         display: flex;
        flex-direction: column;
        justify-content: center;
     }   
    .title{
        font-size: 2em;
    }
    .subTitle{
        font-size: 1.5em ;
    }
    .profilePicture img{
        width: 15em;
    }
    .buttonContainer{
        justify-content: center;
        margin-left: 0;
    }
    .profileHeader{
        margin-top: 6em;
        flex-direction: column-reverse;
        justify-content: center;
    }
    .profileHeader p{
        font-size: 1em;
        text-align: center;
    }
    .profileHeader .title{
        text-align: center;
    }
    .infoHeader{
        display: flex;
        flex-direction: column;
    }
    .profilePicture{
        text-align: center;
        margin-bottom: 1em;
    }
    .aboutContainer p{
        font-size: 0.75em;
    }
    /*||||||||||||||| SKILLS ||||||||||||||||*/
    
    .skillsContainer{
        padding: 0 5em 0 5em;
        margin-bottom: 5%;
    }
    .skillsContainer .title{
        margin-bottom: 5%;
    }

    .skillsInfo{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: auto;
    }
    .skills h2{
        font-size: 2.5em;
    }
    .skills h6{
        font-size: 1em;
    }

    /*|||||||||||||| WHAT I DO ||||||||||||||*/
    
    .whatContainer{
        flex-direction: column;
        align-items: center;
    }

    .card{
        width: 17em;
        height: 14em;
        margin-bottom: 1em;
    }

    .cardInner{
        text-align: center;
    }
    
    .cardInner p{
        font-size: 1.9em;
    }

    .projectsInfo{
        flex-direction: column;
        margin-bottom: 10%;
        justify-content: center;
        align-items: center;
    }    
    .projectsText{
        justify-content: center;
        align-items: center;
        text-align: center;
    }    
  }

  @media only screen and (min-width: 480px) {
    .card{
        width: 21.8em;
        height: 15em;
    }
    .skillsInfo{
        grid-template-columns: 1fr 1fr;
    }
    .skills h2{
        font-size: 3.2em;
    }
    .skills h6{
        font-size: 1em;
    }
  }

  @media only screen and (min-width: 768px) {
    .profileHeader{
        flex-direction: row;
        justify-content: space-around;
        margin-top: 3em;
    }
    .profileHeader .title{
        text-align: start;
    }
    .buttonContainer{
        justify-content: start;
        margin-left: 0;
    }
    .profileHeader p{
        font-size: 1em;
        text-align: start;
    }
    .infoHeader{
        padding-top: 2em;
    }
    .profilePicture{
        margin-bottom: 0;
    }
    .profilePicture img{
        width: 18em;
    }

    .skillsContainer{
        padding: 0;
    }
    .skillsInfo{
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
        
    .cardInner p{
        font-size: 2.2em;
    }

    .aboutInfoContainer{
        display: flex;
        justify-content: space-around;
        flex-direction: row;
        padding: 0 8em 0 8em;
    }
    .form{
        display: flex;
        justify-content: center;
    }

  }

  @media only screen and (max-width: 991px) {

    #navButton{
        margin-left: 0;
    }
      .projectsContainer .title{
        margin-bottom: 15%;
    }
    .projectsInfo h2{
     
        font-size: 2em;
    }
    .projectsInfo h4{
        font-size: 1em;
    }
    .projectsInfo p{
        font-size: 0.75em;
    }
    .projectsImage{
        margin-bottom: 1em;
    }
   
  }

  @media only screen and (min-width: 992px) {

    #navButton{
        margin-left: 1em;
    }
    .profileHeader{
        padding: 0 10% 0 10%;
    }
    .profilePicture img{
        width: 23em;
    }
    .infoHeader{
        padding-top: 5em;
    }
    .whatContainer{
        flex-direction: row;
    }
    .card{
        width: 17em;
        height: 14em;
        margin-left: 1%;
        margin-right: 1%;
    }
    .cardInner{
        text-align: start;
    }
    .aboutContainer p{
        font-size: 18px;
    }
    .aboutInfoContainer p{
        font-size: 1em;
    }

    .skillsInfo{
        flex-direction: row;
    }
    .skillsInfo{
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .projectsInfo{
        justify-content: space-around;
        flex-direction: row;
        margin-bottom: 10%;
    }  
    .projectsText{
        justify-content: start;
        align-items: flex-start;
        text-align: start;
    }     
    #topBtn:hover{
        color: #C4C4C4;
        background-color: #857E7B;
    }
    #card1{
        margin-left: 0;
    }
  }

  @media only screen and (min-width: 1200px) {
    
    .title{
        font-size: 3.5em;
    }
    .profileHeader{
        padding: 0;
    }
    .profilePicture img{
        width: 37.25em;
    }
    .profileHeader p{
        font-size: 1.25em;
    }
    .infoHeader{
        padding-top: 8em;
    }
      
    .projectsInfo{
        justify-content: space-around;
    }
    .card{
        width: 21.8em;
        height: 15em;
    }
    .skills h2{
        font-size: 4.5em;
    }
    .skills h6{
        font-size: 2.2em;
    }
    .projectsInfo h2{
        font-size: 4em;
    }
    .projectsInfo h4{
        font-size: 2.25em;
    }
}