* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-size: 8px;
}

#desktop::-webkit-scrollbar {
    display: none;
}

:root {
    --primary: #E07A5F;
    --secondary: #81B29A;
    --Tertiary: #F2CC8F;
    --background: #F4F1DE;
    --text: #3D3D3D;
    --white: #FFFFFF;
    --black: #000000;

    --kaizen: #5390CD;
    --sandoz: #1C59B5;
    --contracthub: #3769FF;
    --keurig: #231815;
    --amd: #00A66E;

    --para: 2rem;
    --fontlight: 300;
    --fontregular: 400;
    --fontbold: 700;
    --h4: 3rem;
    --h3: 4rem;
    --h2: 5rem;
    --h1: 6rem;
}

html{
    scroll-behavior: smooth;
}

body {
    background-color: var(--background);
    overflow-x: hidden;
    font-family: 'Roboto', sans-serif;
    scroll-behavior: smooth;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.desktop{
     display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100vw;
}

.Mobile{
    display: none;
}

h1 {
    color: var(--text);
    font-size: var(--h1);
    font-weight: var(--fontbold);
}

h2 {
    color: var(--text);
    font-size: var(--h2);
    font-weight: var(--fontregular);
}

h3 {
    color: var(--text);
    font-size: var(--h3);
    font-weight: var(--fontbold);
}

h4 {
    color: var(--text);
    font-size: var(--h4);
    font-weight: var(--fontbold);
}

p {
    color: var(--text);
    font-size: var(--para);
    font-weight: var(--fontregular);
}

.title{
    color: var(--text);
    color: var(--primary);
}

span{
    font-size: var(--para);
    font-weight: var(--fontbold);
}

a{
    text-decoration: none;
    width: inherit;
}

.highlight_text{
    color: var(--primary);
    font-weight: var(--fontbold);
}

.btn_secondary{
    min-width: fit-content;
    max-width: 30%;
    height: fit-content;
    flex: 1;
    background-color: var(--background);
    border: 2px solid var(--primary);
    color: var(--text);
    padding: 1.5rem 2rem;
    font-size: var(--para);
    font-weight: var(--fontbold);
    border-radius: 50rem;
    cursor: pointer;
    transition: all .3s ease-in-out;
    text-align: center;
}

.btn_primary{
    min-width: fit-content;
    max-width: 30vh;
    height: fit-content;
    flex: 1;
    background-color: var(--primary);
    border: 2px solid var(--primary);
    color: var(--white);
    padding: 1.5rem 2rem;
    font-size: var(--para);
    font-weight: var(--fontbold);
    border-radius: 50rem;
    cursor: pointer;
    transition: all .3s ease-in-out;
    text-align: center;
}



.chips{
    min-width: 20rem;
    max-width: fit-content;
    padding: 1.5rem;
    border-radius: 10rem;
    text-align: center;
    color: var(--white);
    font-weight: var(--fontbold);
}

.Logo{
    width:20rem;
}

.border_kaizen{
    border: var(--kaizen) 2px solid;
}

.border_sandoz{
    border: var(--sandoz) 2px solid;
}

.border_ft{
    border: var(--contracthub) 2px solid;
}

.border_keurig{
    border: var(--keurig) 2px solid;
}

.border_amd{
    border: var(--amd) 2px solid;
}














/* Navbar */
.navbar{
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--background);
    width: 100vw;
    padding: 2rem;
    z-index: 3;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    transition: all 0.3s ease-in-out;
}


.nav_content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80vw;
}

.name_logo{
    width: max-content
}

.nav_text{
    width: max-content;
    display: flex;
    justify-content: center;
    gap: 3rem;
    align-items: center;
}

.nav_link{
    width: fit-content;
    color: var(--text);
    font-size: var(--para);
    font-weight: var(--fontbold);
    transition: color 0.3s ease-in-out;
    text-decoration: none;
}

.nav_link:hover{
    color: var(--primary);
    font-weight: var(--fontbold);
    transition: color 0.3s ease-in-out;
}
/* Navbar */



@media (width >= 1000px){


    .btn_secondary:hover{
    flex: 1;
    background-color: var(--white);
    border: 2px solid var(--primary);
    color: var(--primary);
    padding: 1.5rem 2rem;
    font-size: var(--para);
    font-weight: var(--fontbold);
    border-radius: 50rem;
    cursor: pointer;
}

.btn_primary:hover{
    min-width: 10rem;
    flex: 1;
    background-color: #AC533B;
    border: 2px solid #AC533B;
    color: var(--white);
    padding: 1.5rem 2rem;
    font-size: var(--para);
    font-weight: var(--fontbold);
    border-radius: 50rem;
    cursor: pointer;
    transition: all .3s ease-in-out;
}

.proj_card:hover{

    .btn_proj_card{
        opacity: 1;
        transition: opacity 0.5s ease-in-out;
    }

    .card_image{
    width: 45%;
    height: 45%;
    border-radius: 3rem;
    transition: all 0.5s ease-in-out;
    }

    .card_art{
    width: 0%;
    height: 0%;
    transition: all 0.5s ease-in-out;
    }

    .amd_frontground{
    opacity: 0.9;
    transition: all 0.5s ease-in-out;
    }

    .comingsoon_text{
    opacity: 1;
    transition: all 0.5s ease-in-out;
    }

    border: 2px solid var(--primary);


}



}





/* Landing page */
.hero{
    position: absolute;
    z-index: -1;
    top: -20vw;
    left: -40vh;
    width: 150vh;
    height: 100vh;
    background-color: var(--primary);
    border-radius: 50vw;
    rotate: 45deg;
}

.hero_content{
    display: flex;
    width: 80vw;
    height: 80vh;
    justify-content: center;
    align-items: center;
}

.landing_page{
    width: 100vw;
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero_image{
    width: 35vw;
}

.hero_text{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.hero_text p, h2, h3, h4{
    color: var(--white);
}

.hero_text h1{
    color: var(--background);
}

.btn_landingpage{
    display: flex;
    flex: 1;
    gap: 1.5rem;
    justify-content:space-between;
}
/* Landing page */













/* Project page */
.proj{
    display: flex;
    flex-direction: column;
    gap: 3rem;
    width: 80vw;
}

.proj_heading{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    justify-content: center;
}

.proj_card_section{
    display: flex;
    flex-direction: column;
    gap: 3rem;
    width: 100%;
}

.proj_card{
    display: flex;
    position: relative;
    gap: 2rem;
    width: 100%;
    min-height: 30vh;
    flex-basis: 2 1;
    align-items:center;
    padding: 3rem;
    border-radius: 3rem;
}


.card_text{
    width: 200rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.proj_title{
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content:space-between;
}

.proj_tags{
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content:space-between;
}

.btn_proj_card{
    display: flex;
    opacity: 0;
    gap: 1.5rem;
    transition: opacity 0.5s ease-in-out;
}

.card_Pictures{
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.card_image{
    width: 0%;
    height: 0%;
    border-radius: 3rem;
    transition: all 0.5s ease-in-out;
}

.card_art{
    width: 50%;
    height: fit-content;
    transition: all 0.5s ease-in-out;
}

.amd_frontground{
    position: absolute;
    width: 98%;
    height: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    background-color: var(--background);
    z-index: 1;
    transition: all 0.5s ease-in-out;
}

.comingsoon_text{
    color: var(--text);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

.card_art_amd{
    width: 40%;
    height: fit-content;
    transition: all 0.5s ease-in-out;
}

.Software_icon{
    width: 4rem;
}













/* Thoughts page */
.My_thoughts{
    width: 100vw;
    height: max-content;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary);
    margin-top: 5vh;
    padding: 5vh;
}

.my_thoughts_wrapper{
    width: 80vw;
    height: max-content;
    display: flex;
    gap: 5rem;
}

.my_thoughts_text{
    display: flex;
    height: max-content;
    flex-direction: column;
    gap: 2rem;
}

.my_thoughts_content{
    display: flex;
    gap: 1.5 rem;
    flex-direction: column;
}

.quotes{
    width: 5rem;
}
/* Thoughts page */













/* Connect page */
.Connect{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    width: 80vw;
    height: max-content;
    gap: 2rem;
    margin-top: 5vh;
    margin-bottom: 5vh;
}

.connect_wrapper{
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.connect_left{
    width: 50%;
    border-right: var(--text) 2px solid;
}

.connect_section{
    display: flex;
    gap: 2rem;
    align-items: center;
    width: 50%;
}

.connect_info_wrapper{
    display: flex; 
    flex-direction: column;
    gap: 2rem;
}

.connect_info{
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.connect_info a{
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.connect_info h4{
    color: var(--text);
}

.v_line{
    width: 2px;
    border-left: 2px solid var(--text);
    border-radius: 10rem;
}

.connect_right h4, .connect_right h3{
    color: var(--text);
}

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

.connect_right{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 5rem;
    margin-left: 2rem;
}

.certificate_text{
    display: flex;
    gap: 3rem;
    justify-content: space-between;
    align-items: center;
}

.certificate_text h4{
    width: 70%;
    font-weight: var(--fontregular);
}
/* Connect page */

























/* responsive Design */

@media (width <= 1290px){

    .connect_wrapper 
    {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 4rem;
    }

    .connect_left 
    {
        width: 100%;
        border-bottom: var(--text) 2px solid;  
        border-right: none;
        padding-bottom: 4rem;
    }

    .connect_section 
    {
        display: flex;
        gap: 2rem;
        align-items: center;
        width: 100%;
    }

    .connect_right 
    {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 5rem;
    }

}


@media (width <= 1100px) {
    .hero 
    {
        position: absolute;
        z-index: -1;
        top: 5vh;
        left: 0;
        translate: 0;
        width: 95vw;
        height: 40vh;
        background-color: var(--primary);
        border-radius: 0vw 5vw 5vw 0vw;
        rotate: 0deg;;
    }
    

    .hero_image 
    {
        width: 35vw;
        display: none;
    }

    .landing_page 
    {
        width: 100vw;
        height: 50vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .btn_proj_card
    {
        opacity: 1;
    }

    .card_Pictures{
        display: none;
    }

    .proj_card{
        min-height: fit-content;
    }

    .my_thoughts_wrapper{
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .design_process{
        width: 50%;
    }

    .connect_wrapper 
    {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 4rem;
    }

    .connect_left 
    {
        width: 100%;
        border-bottom: var(--text) 2px solid;  
        border-right: none;
        padding-bottom: 4rem;
    }

    .connect_section 
    {
        display: flex;
        gap: 2rem;
        align-items: center;
        width: 100%;
    }

    .connect_right 
    {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 5rem;
    }

}

@media (width = 1024px){

    .landing_page{
        height: fit-content;
        margin-top: 10vh;
    }

    .hero_content{
        height: fit-content;
    }

    .hero{
        height: 64vh;
    }

    .proj{
        margin-top: 10vh;
    }

}

@media (width >= 3000px){

    .card_text{
        width: 100%;
    }

    .chips{
        font-size: 1vw;
        padding: .5vw .8vw;
    }

    .Software_icon {
        width: 4vh;
    }

}












/* Mobile Design */

@media (width <= 800px){

    .Mobile{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4rem;

    }
    
    .desktop{
        display: none;
    }

    p{
        font-weight: 500;
    }

    :root {

        --para: 14px;
        --fontlight: 300;
        --fontregular: 400;
        --fontbold: 700;
        --h4: 20px;
        --h3: 26px;
        --h2: 32px;
        --h1: 38px;
        --caption: 10px;
        --legend: 8px;
    }

    .hero_image{
        display: block;
    }

    .hero_content{
        height: min-content;
        flex-direction: column;
        gap: 2rem;
        justify-content: flex-start;
    }

    .landing_page{
        height: min-content;
        margin-top: 0px;
        align-items: flex-start;
    }

    .hero_text{
        background-color: var(--primary);
        width: 90vw;
        height: min-content;
        padding: 4rem 2rem;
        padding-top: 4rem;
        border-radius: 0 0 5rem 5rem;
        gap: 2rem;

    }

    .name_text{
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .hero_image{
        width: 80vw;
    }

    .proj{
        width: 90vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .Logo{
        width: 30%;
    }

    .chips{
        
        min-width: 10rem;
        padding: 1rem 2rem;
        font-size: var(--caption);
    }

    .card_text{
        justify-content: flex-start;
    }

    .card_text h3, .card_text p{
        text-align: center;
    }

    .btn_proj_card{
        flex-direction: column;
    }

    .btn_primary{
        max-width: 100%;
    }

    .Mobile_proj_card_wrapper{
        width: 100vw;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
    }

    .Mobile_proj_card{
        width: 100vw;
        height: max-content;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        scroll-snap-align: center;
    }

    .proj_card{
        width: 90%;
        height: 100vw;
        display: flex;
        gap: 2rem;
        justify-content: flex-start;
        align-items: flex-start;
    }
    
    .circle_wrapper{
        width: 100%;
        display: flex;
        gap: 1rem;
        justify-content: center;
        align-items: center;
        padding: 2rem;
    }

    .circle_stroke{
        width: 1.5vh;
        height: 1.5vh;
        border: 2px solid var(--text);
        border-radius: 10vh;
    }

    .fill{
        background-color: var(--text);
    }

    .My_thoughts{
        margin-top: 0px;
    }

    .my_thoughts_text{
        width: 90vw;
    }

    .design_process{
        width: 80vw;
    }

    .btn_secondary{
        max-width: 100%;
    }

    .btn_primary{
        min-width: 100%;
    }

    .my_thoughts_content{
        flex-direction: row;
        align-items: flex-start;
        gap: 1rem;
    }


    .Connect{
        width: 90vw;
        justify-content: flex-start;
        align-items: center;
        margin-top: 0vh;
        margin-bottom: 0vh;
    }

    .connect_wrapper{
        width:90vw;
    }

    .connect_right{
        margin-left: 0px;
        gap:2rem;
    }

    

    .certificate_text{
        flex-direction: column;
    }

    .university_logo{
        width: 20%;
    }

    .certificate_text{
        gap:1rem;
    }

    .Mobile_certificate_text{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .certi_txt{
        width: 70%;
    }

    .connect_section{
        flex-direction: column;
    }

    .connect_left{
        border-bottom: 0px
    }

    .connect_info{
        padding: 1.5rem;
        border: 1px solid var(--text);
        width: 90vw;
        border-radius: 2rem;
    }

    }   


    @media only screen and (min-width: 1340px) and (max-width: 1450px){

        .connect_info_wrapper{
            width: 100%;
        }

        .connect_info h4{
            color: var(--text);
            font-size: var(--para);
        }


    }

    @media (width >= 2000px){

        :root {

            --para: 1vw;
            --fontlight: 300;
            --fontregular: 400;
            --fontbold: 700;
            --h4: 1.5vw;
            --h3: 2vw;
            --h2: 2.5vw;
            --h1: 3vw;

}

    }