/* Existing media queries */
html {
    font-size: 16px; /* 1rem = 16px */
}

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

    html {
        font-size: 28px;
        /* color: rosybrown; */
    }
}


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

    html {
        font-size: 24px;
        /* color: brown; */
    }
}

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

    html {
        font-size: 22px;
        /* color: orange; */
    }
}

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

    html {
        font-size: 18px;
        /* color: yellow */
    }


#profile {
height: 83vh;
margin-bottom: 6rem;
}
.section_container {
flex-wrap: wrap;
}
#contact,
#projects {
height: fit-content;
}

.chat {
width: 45vw;
}

.card {
width: 100%;
max-width: 60vw;
}
}

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

    html {
        font-size: 17px;
        /* color: green; */
    }

#desktop-nav {
display: none;
}
#hamburger-nav {
display: flex;
}
#experience,
.experience-details-container {
margin-top: 2rem;
}
#profile,
.about_section_container {
display: block;
}
.arrow {
display: none;
}
section,
.about_section_container {
height: fit-content;
}
section {
margin: 0 5%;
}
.section_container {
margin-top: 0;
}

.chat {
width: 50vw;
}

.card {
width: 100%;
max-width: 60vw;
}

#profile {
height: 100vh;
margin-bottom: 0;
background: linear-gradient(to bottom, transparent 54%, var(--light-color) 65%);

}
.profile_pic {
transform: scale(6) translate(12%, 20%);
}

.profile_pic_container{
width: auto;
height: 17vw;
max-height: 17vw;
margin: 6.8% 15% 17% 15%;
justify-content: center;
}

.about_text_container {
text-align: left;
margin-left: 47%;
margin-bottom: 2vw;
margin-right: 4vw;
max-height: 50vh;
overflow: hidden;
}

.about_text_container p{
font-size: 2.4vw;
}

.text_typewriter {
font-size: 1.25rem;
}
.title {
font-size: 2rem;
}

.about_title{
padding-right: 0;
padding-left: 6vw;
}

#about{
padding-top: 9%;
}


.about_section_container{
margin-left: 0;
}

.nav-links {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
    }

}

@media screen and (max-width: 850px) {
    /* html {
        color: aquamarine;
    } */

    .education_wrapper{
        margin: 61vh 0 61vh 0 !important;
    }

    .sec_educ{
        flex-direction: column-reverse !important;
    }

    .sec_educ .imgs_container{
        height: 50vh !important;
    }

    /* .photographer_pic{
        transform: scale(2) translate(0%, 0 )!important;
    }

    .judo_pic{
        transform: scale(1.6) translate(-10%, 0 )!important;
        top: 25% !important;
    }


    .imgs_container {
        height: 50vh !important;
        max-height: 50vh !important;
        gap: 0.8em !important;
        overflow: hidden !important;
    }

    /* .educ_img{
        width: 50% !important;
        height: 50% !important;
        object-fit: cover !important;
       
    } */


    .educ_img{
        width: fit-content !important;
        height: fit-content !important;
        max-width: 100% !important;
        max-height: 20vh !important;
        object-fit: cover !important;
    }

}

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

    html {
        font-size: 15px;
        /* color: blue; */
    }

#contact,
footer {
/* height: 40vh; */
height: fit-content;
}
#profile {
height: 100vh;
margin-bottom: 0;
background: linear-gradient(to bottom, transparent 50%, var(--light-color) 61%);

}
article {
font-size: 1rem;
}
footer nav {
height: fit-content;
/* margin-bottom: 2rem; */
}

.section_container{
flex-wrap: nowrap;
gap: 5vw;
opacity: 1;
}

.details-container {
padding: 1vh;
}

.details-container p{
font-size: 1.8vh;
}

.details-container h3{
font-size: 2.2vh;
}

.icon {
height: 1.5rem;
}

.contact-info-upper-container,
.btn-container {
flex-wrap: wrap;
}
.contact-info-container {
margin: 0;
}
.contact-info-container p,
.nav-links li a {
font-size: 1rem;
}
.experience-sub-title {
font-size: 2vh;
}
.logo {
font-size: 1.5rem;
}
.nav-links {
flex-direction: column;
gap: 0.5rem;
text-align: center;
}
.profile_pic_container{
width: auto;
height: 38vw;
max-height: 38vw;
margin: 5% 5% 15% 5%;
justify-content: center;
}

.profile_pic {
transform: scale(5) translate(19%, 25%);
}

.text_p1, .about_title, .about_text_container{
opacity: 1;  
}

.text_typewriter {
font-size: 2vh;
}
.title {
font-size: 4vh;
}
.about_text_container {
text-align: left;
margin-left: 50%;
margin-bottom: 5vw;
margin-right: 2vw;
max-height: 43vh;
overflow: hidden;
word-wrap: break-word;
text-wrap: wrap;
flex-wrap: wrap;
}

.about_text_container p{
font-size: 3.3vw;
}
.experience-details-container .section_container, 
.education-details-container .section_container{
flex-wrap: wrap;
}

.chat {
width: 80vw;
}

.card {
width: 100%;
max-width: 80vw;
}

#about{
padding-top: 5%;
}

.prj_img{
    width: 31vw;
    max-width: 31vw;
    height: 50vw;
    max-height: 50vw;
}

.prj_img.reorder {
    width: 20vw;
    max-width: 20vw;
    height: 15vh;
    max-height: 15vh;
    left: 39%;
}

.projects .projects_btn {
    padding: 1vh 6vw;
    margin-top: 8vh;
} 

.prj_img .card .front {
    padding: 1vh;
}

.prj_img.fullscreen {
    height: 65vw;
    max-height: 65vw;
}

.prj_img p{
    font-size: 1.7vw;
}

.prj_soustitre p {
    font-size: 2.4vw;
}


.img_xp .text{
  
    font-size: 0.7rem;
 
}


    .photographer_pic{
        max-width: 120vw !important;
        min-width: 100vw !important;
        width: 115vw !important;
        height: 115vh !important;
        max-height: 115vh !important;
        transform: translateX(-35%)!important;
    }

    /* #education2 {
        margin-bottom: 50vh!important;
    } */
    
    .judo_pic{
        top: 5% !important;
        max-width: 115vw !important;
        min-width: 115vw !important;
        width: 115vw !important;
        height: 115vh !important;
        max-height: 115vh !important;
        transform: translateX(12%)!important;
    }

    .judo .about_text_container{
        margin-left: 10% !important;
    }
    .judo .title {
        text-align: left !important;
        margin-left: 10vw !important;
     }

    .judo .about_section_container {
        margin-right: 45% !important;
        margin-left: 0% !important;
    }

    .photography .title {
       text-align: right !important;
    }
    .photography .about_text_container{
        text-align: right !important;
    }

    .imgs_container {
        height: 48vh !important;
        max-height: 48vh !important;
        gap: 1em !important;
        overflow: hidden !important;
    }

    .educ_img{
        width: fit-content !important;
        height: fit-content !important;
        max-width: 100% !important;
        max-height: 20vh !important;
        object-fit: cover !important;
    }

    .contact-info-upper-container {
        flex-direction: column !important;
        padding: 1rem !important;
    }

    .footer_xp h1 {
        opacity: 0;
        font-size: 16vw!important;
    }
    
    .imgs_prj_wheel{
        left: 0 !important;
        transform: translateX(20%);
    }
}