.hero{
    margin: 205px 0;
}
.hero-content{
    position: relative; /* Ensure hero content appears above the canvas */
    z-index: 0; 
}

.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;

}

a{
    font-family: 'montserrat', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    color: #FF6F61;
}

.projects-container {
    display: flex;
    gap: 20px;
    margin-top: 34px;
}

.projects-images img{
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    border-radius: 10px;
}

.projects-images {
    flex: 1;
    max-width: 50%;
    position: relative;
}
.project-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Adjust as needed */
    height: auto; /* Adjust as needed */
    object-fit: cover; /* Ensure the images cover the container */
}



.projects-details {
    flex: 1;
    max-width: 50%;
}

.project{
    margin: 20px 0;
    display: flex;
    cursor: pointer;
}

.project-line{
    width: 100%;
    height: 2px;
    background-color: rgba(51,51,51, 0.3);
}


.about-content{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about-section1{
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.about-section2{
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.about-content img{
    width: auto;
    height: 250px;
    border-radius: 10px;
}

.about-text{
    flex: 2;
}

.about-text-education{
    flex: 1;
}

.about-text-skills{
    flex: 1;
}

.about-text-hobbies{
    flex: 1;
}

.about-text-languages{
    flex: 1;
}


.about-text, .about-text-skills, .about-text-hobbies, .about-text-education, .about-text-languages{
    background-color: #FFE8CA;
    padding: 20px;
    border-radius: 10px;
}
.contact{
    margin-bottom: 120px;
}

.contact-content{
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: center;
    background-color: #FFE8CA;
    border-radius: 10px;
    height: 550px;
    text-align: center;
    padding: 20px; /* Optional, adds some space inside */
    position: relative; /* Allows absolute positioning of the icons */
}

.contact-content h1{
    font-size: 64px;
    color:#333;
}

.mail{
    font-size: 24px;
    font-family: 'lora', sans-serif;
    color: #333;
    text-transform: none;
    font-weight: normal;
    text-decoration: underline;
}

.icons{
    position: absolute;
    bottom: 20px; /* Position the icons at the bottom with a margin */
    display: flex;
    justify-content: center;
    width: 100%;
}

.contact-text {
    margin-bottom: 20px; /* Adjust margin to control spacing */
}

.icons svg{
    margin: 0 10px;
    width: 40px;
    height: 40px;
}

.first-paragraph{
    margin-bottom: 16px;
}

.year p{
    font-size: 16px;
}

 
.arrow {
    display: inline-block;
    opacity: 0;
    transform: translateX(-10px); /* Start position off to the left */
 
  }

.header.projects{
    cursor: pointer;
}