@media only screen and (max-width: 400px){
    body{ 
        width: 100vw;
        height: 100vh
    }
header{
    width: 100vw;
    height: 10vh;
    background-color: #051622;  
    display: flex;
 }
 nav{
    width: 100%;
 }
 #left-part-logo{
    width: 30%;
 }
#right-part-menu{
    display: flex;
    width: 70%;
    justify-content: space-around;
}
h2{
    font-size: 1.5rem;
}
#left-part-logo img{
height: 60%;
}
#landing-page{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 100%;
    flex-wrap: wrap;
}
#photo-on-the-left{
    width: 80%;
    height: 40%;
}
#photo-on-the-left img{
    width: 200px;
    height: 275px;
}
#text-on-the-right{
    width: 80%;
    height: 35%;
    margin: 0;
    display: flex;
}
#text1{
    width: 100%;
    height: 30%;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
#text2{
    width: 100%;
    height: 70%;
    display: flex;
    justify-content: center;
    text-align: center;
    }
#text-on-the-right h3{
    font-size: 2rem;
    }
    #text-on-the-right p{
    font-size: 1.3em;
    padding:  5px;
    width: 70%;
    }
#showTechnologies{
    margin: 10px;
    height: 30%;
    width: 40%;
    font-size: 0.8em;
}
#downloadCV{
    margin: 10px;
    height: 30%;
    width: 40%;
    font-size: 0.8em;
}
#hiddenDiv {
    width: 90%;
    height: 20%;
    background-color: transparent; /* Set the background to transparent */
    border: 1px solid #F5CB86; /* Add a 1px solid border with the desired color */
    display: none;
    background-color: rgba(35, 161, 251, 0.13);
    flex-wrap: wrap;
    border-radius: 10px;
    justify-content: space-evenly;
}
#hiddenDiv img{
    width: 10%;
    height: 20%;
    margin: 10px;
}
#projects{
    width: 100%;
    height: 90%;
    display: flex;
    flex-direction: column;
}

#contact{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#left-part-contact{
    width: 40%;
    height: 30%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;  
}
#right-part-social{
    width: 100%;
    height: 25%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
#feedback{
    width: 100%;
    height: 40%;
    color: #F5CB86;
    font-family: 'Cormorant Garamond';
    font-size: 3rem;
    display: flex;
    justify-content: center;
    margin: 0;
}
#feedback p{
    font-size: 1.4rem;
    width: 80%;
    height: 100%;
}
#icons{
    width: 100%;
    height: 40%;
    display: flex;
    justify-content: space-evenly;
}
.fa-brands{
    font-size: 2.5rem;
}
#left-part-contact{
    width: 100%;
    height: 60%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly; 
    align-items: center;
}
#contact-title{
    width: 80%;
    height: 15%;
    display: flex;
    margin-left: 75px;
    font-size: 2.5rem;
    
}
#contact-title h2{
    font-style: italic;
    font-size: 3rem;
    text-shadow: 1px 1px 2px black;
    width: 100%;
}
#contact-fields{
    width: 100%;
    height: 70%;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    align-items: center;
}
form{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-left: 75px;
}
form :nth-child(1){
    width: 50%;
    font-size: large;
}
form :nth-child(2){
    width: 50%;
    font-size: large;
}
form :nth-child(3){
    width: 60%;
    font-size: large;
    height: 30%;
}
form * {
    border: none;
    outline: none;
    background: transparent;
    border-bottom: 1px solid;
    border-color: #F5CB86
}
#Send{
    width: 40%;
    height: 15%;
}
/* Basic styles for the Swiper container */
.swiper-container {
    width: 90%;
    height: 35%;
}

/* Styles for individual slides */
.swiper-slide {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: 24px;
    scroll-behavior: auto;
}

/* Pagination styles */
.swiper-pagination {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

/* Optional: Adjust styles for the active slide */
.swiper-slide-active {
    background-color: #c2c2c5;
    color: #000000;
    font-weight: bold;
    transition: background-color 0.3s ease;
}
}





@media only screen and (min-width: 401px) and (max-width: 500px){
    body{ 
        width: 100vw;
        height: 100vh
    }
header{
    width: 100vw;
    height: 10vh;
    background-color: #051622;  
    display: flex;
 } 
 nav{
    width: 100%;
 }
 #left-part-logo{
    width: 30%;
 }
#right-part-menu{
    display: flex;
    width: 70%;
    justify-content: space-around;
}
h2{
    font-size: 1.5rem;
}
#left-part-logo img{
height: 60%;
}
#showTechnologies{
    margin: 10px;
    height: 30%;
    width: 40%;
}
#downloadCV{
    margin: 10px;
    height: 30%;
    width: 40%;
}
#landing-page{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}
#photo-on-the-left{
    width: 100%;
    height: 40%;
}
#photo-on-the-left img{
    width: 50%;
    height: 85%;
}
#text-on-the-right{
    width: 80%;
    height: 35%;
    margin: 0;
    display: flex;
}
#text1{
    width: 100%;
    height: 30%;
    font-size: 1rem;
    display: flex;
    justify-content: center;
}
#text2{
    width: 100%;
    height: 70%;
    display: flex;
    justify-content: center;
    text-align: center;
    }
    #text-on-the-right h3{
    font-size: 2rem;
    }
    #text-on-the-right p{
    font-size: 1.5rem;
    width: 70%;
    padding: 5px;
}
#text2 p{
    display: flex;
    justify-content: center;
    align-items: center;
}
#hiddenDiv {
    width: 90%;
    height: 20%;
    background-color: transparent; /* Set the background to transparent */
    border: 1px solid #F5CB86; /* Add a 1px solid border with the desired color */
    display: none;
    background-color: rgba(35, 161, 251, 0.13);
    flex-wrap: wrap;
    border-radius: 10px;
    justify-content: space-evenly;
}
#hiddenDiv img{
    width: 10%;
    height: 20%;
    margin: 10px;
}
#projects{
    width: 100%;
    height: 90%;
    grid-template-columns: 200px 200px 200px 200px 200px;
    grid-template-rows: 1fr 1fr 1fr;
}
#contact{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#left-part-contact{
    width: 40%;
    height: 30%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;  
}
#right-part-social{
    width: 100%;
    height: 25%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
#feedback{
    width: 100%;
    height: 40%;
    color: #F5CB86;
    font-family: 'Cormorant Garamond';
    font-size: 3rem;
    display: flex;
    justify-content: center;
    margin: 0;
}
#feedback p{
    font-size: 1.4rem;
    width: 80%;
    height: 100%;
}
#icons{
    width: 100%;
    height: 40%;
    display: flex;
    justify-content: space-evenly;
}
.fa-brands{
    font-size: 2.5rem;
}
#left-part-contact{
    width: 100%;
    height: 60%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly; 
    align-items: center;
}
#contact-title{
    width: 80%;
    height: 15%;
    display: flex;
    margin-left: 75px;
    font-size: 2.5rem;
    
}
#contact-title h2{
    font-style: italic;
    font-size: 3rem;
    text-shadow: 1px 1px 2px black;
    width: 100%;
}
#contact-fields{
    width: 100%;
    height: 70%;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    align-items: center;
}
form{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-left: 75px;
}
form :nth-child(1){
    width: 50%;
    font-size: large;
}
form :nth-child(2){
    width: 50%;
    font-size: large;
}
form :nth-child(3){
    width: 60%;
    font-size: large;
    height: 30%;
}
form * {
    border: none;
    outline: none;
    background: transparent;
    border-bottom: 1px solid;
    border-color: #F5CB86
}
#Send{
    width: 40%;
    height: 15%;
}
}





@media only screen and (min-width: 501px) and (max-width: 600px){
    body{ 
        width: 100vw;
        height: 100vh
    }
header{
    width: 100vw;
    height: 10vh;
    background-color: #051622;  
    display: flex;
 } 
 nav{
    width: 100%;
 }
 #left-part-logo{
    width: 30%;
 }
#right-part-menu{
    display: flex;
    width: 70%;
    justify-content: space-around;
}
h2{
    font-size: 1.5rem;
}
#left-part-logo img{
height: 60%;
}
#landing-page{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}
#photo-on-the-left{
    width: 100%;
    height: 60%;
}
#photo-on-the-left img{
    width: 300px;
    height: 400px;
}
.swiper-container {
    width: 90%;
    height: 35%;
}
#text-on-the-right{
    width: 80%;
    height: 40%;
    margin: 0;
    display: flex;
}
#text1{
    width: 100%;
    height: 30%;
    font-size: 1rem;
    display: flex;
    justify-content: center;
}
#text2{
    width: 100%;
    height: 70%;
    display: flex;
    justify-content: center;
    text-align: center;
    }
    #text-on-the-right h3{
    font-size: 2rem;
    }
    #text-on-the-right p{
    font-size: 1.1rem;
    width: 70%;
    padding: 5px;
}
#projects{
    width: 100%;
    height: 90%;
}
#contact{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#left-part-contact{
    width: 40%;
    height: 30%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;  
}
#right-part-social{
    width: 100%;
    height: 25%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
#feedback{
    width: 100%;
    height: 40%;
    color: #F5CB86;
    font-family: 'Cormorant Garamond';
    font-size: 3rem;
    display: flex;
    justify-content: center;
    margin: 0;
}
#feedback p{
    font-size: 1.4rem;
    width: 80%;
    height: 100%;
}
#icons{
    width: 100%;
    height: 40%;
    display: flex;
    justify-content: space-evenly;
}
.fa-brands{
    font-size: 3rem;
}
#left-part-contact{
    width: 100%;
    height: 60%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly; 
    align-items: center;
}
#contact-title{
    width: 80%;
    height: 15%;
    display: flex;
    margin-left: 75px;
    font-size: 2.5rem;
    
}
#contact-title h2{
    font-style: italic;
    font-size: 4rem;
    text-shadow: 1px 1px 2px black;
    width: 100%;
}
#contact-fields{
    width: 100%;
    height: 70%;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    align-items: center;
}
form{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-left: 75px;
}
form :nth-child(1){
    width: 50%;
    font-size: large;
}
form :nth-child(2){
    width: 50%;
    font-size: large;
}
form :nth-child(3){
    width: 60%;
    font-size: large;
    height: 30%;
}
form * {
    border: none;
    outline: none;
    background: transparent;
    border-bottom: 1px solid;
    border-color: #F5CB86
}
#Send{
    width: 40%;
    height: 15%;
}
}