:root {
    font-size: 16px;
    /*Colors*/
    --primary: #4F3DFF;
    --primary-hover: #301DE2;
    --primary-disabled:#ADA5FF;

    --background-primary:#FCFCFC;
    --background-secondary:#F6F6F6;
    --background-secondary-two:#e6e6e6;
    --background-tertiary:#0A0A0A;
    --background-focus:#4F3DFF;

    --text-primary: #06030F;
    --text-secondary: #84888b;
    --text-tertiary: #F8F8F9;
    --text-focus:#4F3DFF;

    --border-primary: #E8E8E8;
    --border-disabled: rgba(255, 255, 255, 0.00);
    --border-focus:#4F3DFF;

    /*Font*/
    @import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&display=swap');
    --font-primary: "Albert Sans", sans-serif;

  }

* {
    margin: 0;
    padding: 0; 
    box-sizing: border-box;
} 

body {
    font-family: var(--font-primary);
    background-color: var(--background-primary);
    overflow-x:hidden;
}

a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

a:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}
h3 {
    font-size: 40px;
}

h4 {
    font-size: 26px;
    font-weight: 500;
}

h5 {
    font-size: 14px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.wrapper {
    margin: auto;
    max-width: 1440px;
    width: 100%;
}

.wrapper2 {
    margin: auto;
    max-width: 1920px;
    width: 100%;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    height: 90px;
    position: relative;
    top: 50px;
    z-index: 100;
    
}

.sticky {
    position: fixed;
    top: 0;
    left: 0;
    max-width: 100%;
    padding: 0 40px;
    background-color: var(--background-primary);
}
  
  .sticky + .content {
    padding-top: 102px;
  }

.link {
    font-size: 14px;
    color: var(--primary);
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 500;
}

nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

nav .nav-options {
    display: block;
    padding: 10px 0;
    margin: 0 16px;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    text-align: center;
    border-bottom: var(--border-disabled) 2px solid;
}

nav .nav-options:hover {
    color: var(--text-focus);
    border-bottom: var(--primary) 2px solid;
}

.button {
background-color:var(--primary);
color: var(--text-tertiary);
padding: 12px 24px;
border-radius: 120px;
text-decoration: none;
}

.button:hover {
    background-color: var(--primary-hover);
    color: var(--text-tertiary);
    text-decoration: none;
}

.hero {
    width: 100%;
    height: 90vh;
    display:flex;
    align-items: center;
}

.heroImage img {
    width: 80px;
}

h1 {
    font-size: 70px;
    color: var(--text-primary);
    font-weight: 400;
    line-height: 65px;
}

.heroContent span {
    font-weight: 600;
    color: var(--text-focus);
}

.heroContent h2 {
    font-size: 20px;
    font-weight: 200;
    color: var(--text-secondary);
    width: 400px;
    padding: 14px 0;
}

.social {
    display: flex;
    align-items: center;
    align-items: center;
    justify-content: space-between;
}

.social img {
    padding: 4px;
}

.social img:hover {
    background-color: var(--background-secondary-two);
    border-radius: 50px;
}

.portfolio {
    width: 100%;
}

.portfolio h3 {
    width: 100%;
    margin-bottom: 40px;
}

.projects {
    width: 100%;
    display: flex;
    flex-wrap: wrap;  
    justify-content: space-around;
}

.folioCard {
    display: flex;
    flex-flow: column;
    height: 430px;
    background-color: var(--background-secondary);
    border: 1px solid var(--border-primary);
    width: 50%;
    border-radius: 20px;
    padding: 24px 24px 0px 24px;
    box-sizing: border-box;
    margin: 14px 0;
    width: 48%;
    justify-content: space-between;
}

.cardContent {
    width: 70%;
}

.cardContent p {
    padding: 16px 0px;
    font-weight: 300;
}

.cardContent a {
    padding: 6px 0;
    border-bottom: 2px solid var(--background-secondary);
}

.cardContent a:hover {
    color: var(--primary-hover);
    border-color: var(--border-focus);
    text-decoration: none !important;
}

.cardImage {
    display: flex;
    width: 100%;
}

.cardImage img {
    width: 100%;
    object-fit: cover;
    height: 26vh;
    object-position: top;
}

.portCTA {
    display: flex;
    flex-flow: row;
    justify-content: center;
    padding: 24px;
}

.collabs {
    width: 100%;
    margin-top: 42px;
    background-color: var(--background-secondary);
    display: flex;
    flex-flow: column;
    padding: 42px 0;
}

.collabs h3 {
    text-align: center;
    padding: 24px;
    font-weight: 400;

}

.collaborators {
    margin: auto;
    max-width: 1440px;
    padding-top: 24px;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
}

.collaborators img {
    padding: 24px;
}

.recomendation {
    background-color: var(--background-tertiary);
    width: 100%;
    padding: 70px 0;
    display: flex;
    flex-flow: column;
    justify-content: center;
}

.recomendation h3 {
    width: 100%;
    padding-bottom: 34px;
    text-align: center;
    color: var(--text-tertiary);
    font-weight: 400;
}

.recomendation p {
    color: var(--text-tertiary);
    width: 40%;
    text-align: center;
    font-weight: 300;
    line-height: 24px;
}

.recContent {
    margin: auto;
    max-width: 1440px;
    width: 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

.recContent h4 {
    color: var(--text-tertiary);
    padding-top: 14px;
}

.recContent h5 {
    font-weight: 400;
    font-size: 12px;
}

.recContent img {
    width: 60px !important;
    padding-top: 24px;
}

.owl-theme .owl-dots .owl-dot.active span {
    background-color: var(--primary)!important;
}

.owl-theme .owl-dots .owl-dot span {
    background-color: rgba(217, 217, 217, 0.20) !important;
}

.contact {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 50vh;
}

.contact h1 {
    font-size: 70px;
    color: var(--text-primary);
    font-weight: 400;
    line-height: 65px;
    padding-bottom: 34px;
}

.contact h1 span {
    color: var(--primary);
    font-weight: 600;
}

.contactContent {
    display: flex;
    flex-flow: column;
    align-items: center;
}

.contactContent .button {
    width: auto;
}

footer {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    height: 90px;
    border-top: 1px solid var(--border-primary);
}

.footerSocial img {
    padding: 12px;
}

/*SIDEBAR*/
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    background-color: var(--background-tertiary);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    display: flex;
    flex-flow: column;
    align-items: start;
  }
  
  .sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: var(--text-tertiary);
    display: block;
    transition: 0.3s;
  }
  
  .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }

  .sidenav .button {
    background-color: var(--primary);
    color: var(--text-tertiary);
    padding: 12px 24px;
    border-radius: 120px;
    text-decoration: none;
    text-align: center;
    margin-left: 25px;
  }

/*PROJECT STYLES*/
.heroProject {
    width: 100%;
    height: 90vh;
    background-color: var(--background-secondary);
    position: relative;
    bottom: 90px;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    padding-top: 60vh;
}

.projectContent {
    display: flex;
    flex-flow: column;
    align-items: center;
    width: 600px;
}

.projectContent h2 {
    font-weight: 300;
    text-align: center;
}

.projectContent span {
    font-weight: 600;
}

.heroProject img {
    max-width: 1250px;
    width: 100%;
}

.projectContainer{
    margin: 22vh auto 0;
} 

.projectInfo {
    display: flex;
    flex-flow: row;
    justify-content: space-around;
}

.projectAbout {
    width: 50%;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    line-height: 30px;
}

.details {
    width: 10%;
    display: flex;
    flex-flow: column;
}

.detailAbout {
    padding-bottom: 24px;
}

.detailAbout ul {
    list-style-position: inside;
}

.detailRow {
    padding-bottom: 24px;
}

.specs {
    width: 100%;
}

.specs h3 {
    text-align: center;
    margin-top: 60px;
}

.specsCard h4 {
    margin-bottom: 24px;
}

.specsCard {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-around;
    margin-top: 40px;
    line-height: 30px;
}

.specsCard img {
    width: 50%;
}

.specsCard .specsContent {
    width: 40%;
}

.specsCard2 {
    display: flex;
    flex-flow: row-reverse wrap;
    align-items: center;
    justify-content: space-around;
    margin-top: 40px;
    line-height: 30px;
}

.specsCard2 img {
    width: 50%;
}

.specsCard2 h4 {
    margin-bottom: 24px;
}

.specsCard2 .specsContent {
    width: 40%;
}

.outcome {
    height: 60vh;
    background-color: var(--background-secondary);
    display: flex;
    flex-flow: column;
    align-items: center;
    margin-bottom: 30vh;
}

.outcome img {
    width: 100%;
    max-width: 1440px;
}

.outcomeContent {
    display: flex;
    flex-direction: row;
    justify-content:space-around;
    align-items: center;
    max-width: 1440px;
    margin: 0 auto;
}

.outcome h2 {
    font-weight: 300;
    width: 40%;
}

.outcome h3 {
    text-align: center;
    padding: 60px 0;
}

.bottomCtas  {
    display: flex;
    max-width: 1440px;
    width: 100%;
    justify-content: center;
}

.bottomCtas a {
    padding: 12px 0;
    margin: 0 12px;
    border-bottom: 2px solid var(--border-disabled);
}

.bottomCtas a:hover {
    border-bottom: 2px solid var(--border-focus);
    text-decoration: none !important;
}

.wrapperForm {
    max-width: 1440px;
    margin: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    height: 90vh;
    align-items: center;
    flex-flow: column;
}

.protectedForm {
    display: flex;
    flex-flow: column;
    width: 50%;
    padding: 24px;
    align-items: center;
}

.protectedForm h3 {
    font-size: 35px;
    margin-bottom: 12px;
    text-align: center;
}

.protectedForm p {
    text-align: center;
    margin-bottom: 24px;
    color: var(--text-secondary);
}

.formInput {
    width: 400px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #E7E7E6;
    background-color: #F6F6F6;
    font-size: 15px;
    margin-bottom: 14px;
}

.formInput:focus {
    border:1px solid var(--border-focus) ;
}

.protectedForm .button {
    border: none;
    width: 400px;
}

.aboutMe {
    justify-content: space-between;
}

.aboutHero {
    width: 50%;
}

.aboutHero h2 {
    width: 100%;
    line-height: 30px;
    color: var(--text-primary);
}

.aboutImage img {
    width: 250px;
}

.aboutTooltip {
    position: relative;
    right: 135px;
    bottom: 180px;
    width: 190px !important;
}

.workHistory {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.workItem {
    padding-bottom: 14px;
    width: 45%;
    border-bottom: 1px solid var(--border-primary);
    margin-bottom: 32px;
}

.aboutTools {
    max-width: 1440px;
    margin: auto;
    padding: 60px 0;
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.aboutTools h3 {
    width: 100%;
    text-align: center;
}

.tools {
    background-color: var(--background-secondary);
}

.toolStack {
    width: 45%;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    flex-direction: row;
    align-content: start;
}

.toolStack h4 {
    width: 100%;
    margin: 24px 0;
}

.toolBox {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    color: var(--text-secondary);
    margin: 8px 0px;
    width: 120px;
}

.toolBox p {
    margin: 12px 0;
}

/*MEDIA QUERIES*/

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

    body {
        overflow-x:hidden;
    }
    .wrapper {
        width: 100%;
        padding: 0 24px;
    }

    .sticky {
        position: fixed;
        top: 0;
        left: 0;
        max-width: 100%;
        padding: 0 24px;
    }
}

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

    body {
        overflow-x:hidden;
    }
    .wrapper {
        width: 100%;
        padding: 0 24px;
    }

    .cardImage img {
        height: 15vh;
        
    }

}

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

    body {
        overflow-x:hidden;
    }
    .wrapper {
        width: 100%;
        padding: 0 24px;
    }

    .cardImage img {
        height: 15vh;
        
    }

    .cardContent {
        width: 100%;
    }
    .folioCard {
        height: 380px;
    }

    .collaborators {
        justify-content: center;
    }

    /*Project PAge*/
    .heroProject {
        padding-top: 30vh;
    }

    .heroProject h1 {
        font-size: 55px;
    }

    .heroProject h2 {
        font-size: 20px;
    }

    .heroProject img {
        margin-top: 24px;
    }

    .projectContainer {
        margin: 0vh auto 0;
    }

    .details {
        width: 30%;
    }

    .projectAbout {
        width: 60%;
    }

    .specs {
        width: 100%;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
    }

    .specsCard {
        flex-flow: column wrap;
    }

    .specsCard2 {
        flex-flow: column wrap;
    }

    .specsCard .specsContent {
        width: 90%;
    }

    .specsCard2 .specsContent {
        width: 90%;
    }

    .specsCard img {
        width: 90%;
    }

    .specsCard2 img {
        width: 90%;
    }
    
    .outcomeContent{
        flex-flow: column;
        margin-bottom: 24px;
    }

    .outcome h2 {
        width: 80%;
        font-size: 20px;
        text-align: center;
    }

    .outcome {
        margin-bottom: 10vh;
    }

    .aboutHero {
        width: 60%;
    }

    .aboutHero h2 {
        font-size: 18px;
    }

    .heroImage {
        width: 40%;
        display: flex;
        align-items: center;
    }

    .aboutTooltip {
        right: 134px;
        bottom: 110px;
    }

    .workItem {
    width: 100%;
    }

    .toolStack {
        width: 95%;
    }

    .aboutTools {
        justify-content: center;
    }

    .toolStack h4 {
        text-align: center;
    }
}


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

    header {
        top: 30px;
        width: 100%;
    }

    .slideNav {
        display: block !important;
    }

    h1 {
        font-size: 55px !important;
        line-height: 55px;
    }

    nav {
        display: none;
    }

    .heroContent {
        width: 80%;
    }

    .heroContent h2 {
        width: 100%;
        font-size: 18px;
    }

    .folioCard {
        height: 380px;
        width: 100%;
    }

    .recomendation p {
        width: 80%;
    }

    .contactContent h1 {
        text-align: center;
        font-size: 40px !important;
        line-height: 42px;
    }

    footer {
        flex-flow:column-reverse;
        height: auto;
    }


    footer p {
        padding: 10px 0;
        text-align: center;
    }

    /*Project PAge*/
    .projectContent h1 {
        font-size: 40px !important;
    }

    .heroProject {
        padding-top: 30vh;
        padding: 50vh 24px;
    }

    .heroProject h2 {
        font-size: 18px;
    }

    .projectContent {
        width: 100%;
    }

    .projectInfo {
        flex-flow: column;
    }

    .details {
        width: 100%;
    }
    
    .outcomeContent {
        padding: 24px;
    }
    
    .outcomeContent h4 {
        text-align: center;
        margin-bottom: 12px;
    }

    .outcome h2 {
        font-size: 18px;
        width: 100%;
    }

    .projectAbout {
        width: 100%;
        
    }

    .protectedForm {
        width: 90%;
    }

    .heroContent {
        width: 100%;
        text-align: center;
    }

    .formInput {
        width: 100%;
    }

    .protectedForm .button {
        width: 100%;
    }

    .bottomCtas {
        width: 90%;
        text-align: center;
    }

    .aboutMe {
        justify-content: space-around;
        flex-flow: column;
        margin-top: 70px;
    }

    .aboutImage {
        width: 190px;
    }

    .aboutAvatar {
        width: 190px !important;
    } 
}