html, body{
    overflow-x:hidden;
    max-width:100%;
}

/* For the navigation bar */
/* ------------------------------------------------------------------------------------------------------------------------------------------------- */

nav{
    background-color: rgb(108, 139, 75); position: fixed; top: 0%; width: 100%; left: 0px; display: flex; height: 100px;
    color: white; z-index: 1000; align-items: center; justify-content: space-between; border-bottom: 5px solid rgb(65, 93, 39);   
}

.menu {
    display: flex; gap: 70px; margin-left: -30px; font-size: 1em; font-weight: bold;
}

.menu h1:hover {
    color:  rgb(251, 255, 31); cursor: pointer; 
}

.menu a {
    color: inherit; text-decoration: none; 
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Style for the body */

.content {
    margin-top: 70px; margin-left: 50px; margin-right: 50px; padding: 50px; color: rgb(0, 0, 0); line-height: 1.2;
}

html {
    scroll-behavior: smooth;
}

.underline {
    text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 3px;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Style for the education card */

.education-timeline{
    position: relative; border-left: 5px solid rgb(65, 93, 39); padding-left: 50px; margin-top: 40px;
}

.education-item{
    position: relative; margin-bottom: 60px;
}

.roadmap-point{
    position: absolute; left: -71px; top: 15px; width: 30px; height: 30px; background: rgb(255, 255, 255); 
    border: 4px solid  rgb(65, 93, 39); transform: rotate(45deg); transition: all 0.5s ease;
}

.roadmap-point::before{
    content: ""; width: 12px; height: 12px; background: rgb(119, 147, 90); position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

.education-content{
    background: rgb(119, 147, 90); color: white; width: 900px; padding: 25px; border: 4px solid rgb(65, 93, 39);
    border-radius: 20px; transition: all 0.5s ease;
}

.education-item:hover .roadmap-point{
    transform: rotate(225deg) scale(1.15);
}

.education-item:hover .education-content{
    transform: translateX(10px); transition: 0.5s;
}

.timeline-content h3{
    font-size: 1.2em; font-weight: normal; 
}

.education-content h3{
    font-size: 1.2em; font-weight: normal; 
}

.education-item:hover .education-content h3{
    transform: translateX(10px); transition: 0.5s;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Style for the experience card */

.timeline {
    position: relative; border-left: 5px solid rgb(65, 93, 39); padding-left: 40px; padding-bottom: -50px 
}

.timeline-item {
    position: relative; margin-bottom: 50px;
}

.timeline-dot {
    width: 20px; height: 20px; background: rgb(65, 93, 39); border-radius: 50%; position: absolute; left: -53px; top: 25px;
}

.timeline-content {
    width: 700px; padding: 25px; background: rgb(119, 147, 90); color: white; border: 4px solid rgb(65, 93, 39); border-radius: 20px;
}

.experience-timeline{
    position: relative; border-left: 5px solid rgb(65, 93, 39); padding-left: 50px; margin-top: 40px;
}

.experience-item{
    position: relative; margin-bottom: 60px;
}

.roadmap-point{
    position: absolute; left: -71px; top: 15px; width: 30px; height: 30px; background: rgb(255, 255, 255); 
    border: 4px solid  rgb(65, 93, 39); transform: rotate(45deg); transition: all 0.5s ease;
}

.roadmap-point::before{
    content: ""; width: 12px; height: 12px; background: rgb(119, 147, 90); position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

.experience-content{
    background: rgb(119, 147, 90); color: white; width: min(900px, 100%); padding: 25px; border: 4px solid rgb(65, 93, 39);
    border-radius: 20px; transition: all 0.5s ease;
}

.experience-item:hover .roadmap-point{
    transform: rotate(225deg) scale(1.15);
}

.experience-item:hover .experience-content{
    transform: translateX(10px); transition: 0.5s;
}

.timeline-content h3{
    font-size: 1.2em; font-weight: normal; 
}

.experience-content h3{
    font-size: 1.2em; font-weight: normal; 
}

.experience-item:hover .experience-content h3{
    transform: translateX(10px); transition: 0.5s;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Style for experience responsive */


@media (max-width:1105px){

    .experience-timeline{
        padding-left:20px; margin-top:20px; border-left:3px solid rgb(65, 93, 39);
    }

    .roadmap-point{
        width:18px; height:18px; left:-34px; top:18px;
    }

    .roadmap-point::before{
        width:8px; height:8px;
    }

    .experience-content{
        width:100%; max-width:100%; padding:15px; box-sizing:border-box;
    }

    .experience-content h3{
        font-size:0.9rem; line-height:1.5;
    }

    .experience-content h2{
        text-decoration-thickness: 2px; text-underline-offset: 4px; line-height: 1.4;
    }

    .experience-item{
        margin-bottom:35px;
    }

    .experience-item:hover .experience-content{
        transform:none;
    }

    .experience-item:hover .roadmap-point{
        transform:rotate(225deg);
    }
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Style for the projects card */

.project-card{
    width: 350px; background-color: rgb(255, 255, 255); border-radius: 25px; padding: 15px; border: 4px solid rgb(65, 93, 39);
    text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.2);  transition: 0.4s ease;
}

.project-card:hover {
    transform: translateY(-10px);
}

.project-card img{
    width: 100%; height: 180px; object-fit: cover; border-radius: 15px;
}

.project-card h2{
    color: rgb(65, 93, 39); font-size: 1.4rem; text-align: justify; margin-top: 7px;
}

.project-card p{
    font-size: 1em; margin-top: -15px; color: rgb(65, 93, 39); text-align: justify;
}

.project-card h3{
    font-size: 1.1em; font-weight: normal; text-align: justify; margin: 0;
}

.projects-container{
    display: flex; gap: 70px; flex-wrap: wrap; 
}

.project-card-link{
    text-decoration: none; color: inherit;
}

.project-card h4{
    font-weight: bold; text-align: center; margin-top: 15px; margin-bottom: 5px;
}

.project-card:hover .project-link-text{
    color: rgb(65, 93, 39);
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------- */
/* For resposive projects page */


@media (max-width:1120px){

    .projects-container{
        display:flex; flex-wrap:wrap; justify-content:flex-start; gap:30px;
    }

    .project-card{
        width:100%; max-width:450px; box-sizing:border-box;
    }

    .project-card img{
        width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
    }

    .project-card h2{
        font-size:1.2rem; text-align:left;
    }

    .project-card p{
        font-size:0.95rem; text-align:left;
    }

    .project-card h3{
        font-size:0.95rem; text-align:left; line-height:1.5;
    }

    .project-card h4{
        font-size:0.9rem;
    }
}

@media (min-width:532px) and (max-width:1012px){

    .projects-container{
        display:block;
    }

    .project-card{
        width:95% !important; max-width:none !important; margin:0 auto 30px auto; box-sizing:border-box;
    }
}

@media (min-width:1018px) and (max-width:1384px){

    .projects-container{
        display:flex; flex-wrap:wrap; justify-content:space-between; gap:30px;
    }

    .project-card-link{
        width:48% 
    }

    .project-card{
        width:100%; box-sizing:border-box;
    }
    
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Style for the skills card */

.skills-card {
    width: auto; background-color: rgb(119, 147, 90); border-radius: 25px; padding: 20px; border: 4px solid rgb(65, 93, 39);
    text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.2);  transition: 0.4s ease; text-align: justify; height: 30px;
    display: flex; align-items: center; gap: 15px;
}

.skills-card h2{
    text-align: justify; color: rgb(255, 255, 254); margin: 0px;
}

.skills-container {
    display: flex; gap: 40px; flex-wrap: wrap;
}

.skills-card:hover {
    transform: translateY(-10px);
}

.skills-card i{
    font-size: 45px; display: block; text-align: center;
}

.skill-icon{
    width: 50px; height: 50px; object-fit: contain;
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Skills resposive */

@media (max-width:1105px){

    .skills-container{
        gap:15px;
    }

    .skills-card{
        padding:10px 8px; gap:4px;
    }

    .skills-card h2{
        font-size:1.1rem;
    }

    .skills-card i{
        font-size:20px;
    }

    .skill-icon{
        width:18px; height:18px;
    }
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Style for the specializations card */

.specialization-card{
    width: 350px; background-color: rgb(255, 255, 255); border-radius: 25px; padding: 15px; border: 4px solid rgb(65, 93, 39);
    text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.2);  transition: 0.4s ease; cursor: pointer;
}

.specialization-card:hover {
    transform: translateY(-10px);
}

.specialization-card img{
    width: 100%; height: auto; object-fit: cover; border-radius: 15px;
}

.specialization-card h2{
    color: rgb(65, 93, 39); font-size: 1.4rem; text-align: left; margin-top: 7px;
}

.specialization-card p{
    font-size: 1em; margin-top: -10px; color: rgb(65, 93, 39); text-align: justify;
}

.specialization-card h4{
    font-weight: bold; text-align: center; margin: 0;
}

.specializations-container{
    display: flex; gap: 70px; flex-wrap: wrap; 
}

.modal{
    display: none; position: fixed; z-index: 99999; left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.9); 
    overflow-y: auto; overflow-x: hidden;
}

.close{
    position: absolute; top: 15px; right: 30px; color: white; font-size: 50px; font-weight: bold; cursor: pointer; z-index: 100000;
}

.close:hover{
    color: lightgray;
}

.specialization-card:hover .specialization-link-text{
    color: rgb(65, 93, 39);
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Style for the about */

.about-text{
    text-indent: 40px; text-align: justify; font-size: 1.2em; font-weight: normal;
}

.about-container{
    display: flex; justify-content: space-between; align-items: center; gap: 110px;
}

.about-left{
    flex: 1;
}

.about-right{
    flex: 0 0 350px; 
}

.about-right img{
    width: 350px; height: 400px; object-fit: cover; border-radius: 20px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); 
    border: 4px solid rgb(65, 93, 39); margin-top: 70px; margin-right: -10px;
}

.name{
    font-size: 3.1rem; 
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Style for the education */

.education-details{
    display: flex; justify-content: space-between; align-items: center; gap: 40px;
}

.education-text{
    flex: 1;
}

.education-image{
    width: 320px; display: flex; justify-content: center; align-items: center; display: flex; flex-direction: column;
}

.education-image img{
    width: 300px; border-radius: 20px; height: 200px; object-fit: contain;
}

.education-image-caption{
    margin-top: 8px; margin-bottom: 0; color: white; font-size: 1rem; font-weight: bold; text-align: center;
}

.education-image-caption a{
    color: white; text-decoration: none; font-size: 0.9rem;
}

.education-image-caption a:hover{
    color: rgb(251, 255, 31);
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Style Education resposive */

@media (max-width:1105px){

    .education-timeline{
        padding-left:20px; margin-top:20px; border-left:3px solid rgb(65, 93, 39);
    }

    .education-item{
        margin-bottom:35px;
    }

    .education-content{
        width:100%; max-width:100%; padding:15px; box-sizing:border-box;
    }

    .education-details{
        display:flex; flex-direction:column; gap:20px; align-items:center;
    }

    .education-text{
        width:100%;
    }

    .education-text h2{
        font-size:1.1rem; line-height:1.4; text-decoration-thickness:2px; text-underline-offset:4px;
    }

    .education-text h3{
        font-size:0.9rem; line-height:1.5;
    }

    .education-image{
        width:100%;
    }

    .education-image img{
        width:220px; height:auto;
    }

    .education-image-caption{
        font-size:0.85rem;
    }

    .education-image-caption a{
        font-size:0.8rem;
    }

    .education-item:hover .education-content{
        transform:none;
    }

    .education-item:hover .roadmap-point{
        transform:rotate(225deg);
    }
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Style for the Contact Page */

.social-links{
    display: flex; gap: 50px;
}

.social-btn{ 
    width: 100px; height: 100px; border-radius: 50%; display: flex; justify-content: center; align-items: center; text-decoration: none; 
    color: white; font-size: 55px; transition: 0.3s ease; background-color: rgb(65, 93, 39);
}

.social-btn:hover{
    transform: translateY(-8px) scale(1.08);
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Contact Resposive */

@media (max-width:1105px){

    .contact-card h2{
        font-size:1.2rem; text-align:justify; line-height:1.5;
    }

    .social-links{
        justify-content:justify; flex-wrap:wrap; gap:25px;
    }

    .social-btn{
        width:75px; height:75px; font-size:38px;
    }
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------- */
/* For Resposive */

.menu-toggle{
    display:none; font-size:30px; cursor:pointer; color:white;
}

@media (max-width:1480px){

    nav{
        position: relative; height:auto; min-height:30px; padding:15px 20px; justify-content:flex-start; flex-direction:column;  
        align-items:flex-start; margin:0; top:0; left:0; width:100%;
    }

    .content{
        margin:20px auto; padding:20px; max-width:100%;
    }

    .menu-toggle{
        display:block; font-size:32px; color:white;
    }

    .menu{
        display:none; flex-direction:column; width:100%; gap:15px; margin-top:15px; margin-left:0; text-align:left;
    }

    .menu.show{
        display:flex;
    }

    body{
        margin:0; padding:0;
    }

    .menu h1{
        font-size:1.1rem; margin:0;
    }

    .about-container{
        flex-direction:column; gap:30px; text-align:justify;
    }

    .about-right{
        flex:none;
    }

    .about-right img{
        width:250px; height:300px; margin:0;
    }

    .about-text{
        font-size:1rem; text-indent:0; line-height:1.6;
    }

    .name{
        font-size:2rem;
    }

    .content{
        margin-left:20px; margin-right:20px; padding:20px;
    }
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------- */
/* specializations Resposive */

@media (min-width:1018px) and (max-width:1382px){

    .specializations-container{
        display:flex; flex-wrap:wrap; justify-content:space-between; gap:30px;
    }

    .specialization-card{
        width:48%; box-sizing:border-box;
    }
}

@media (max-width:1017px){

    .specializations-container{
        display:flex; flex-direction:column; gap:25px;
    }

    .specialization-card{
        width:100%; box-sizing:border-box; padding:15px;
    }

    .specialization-card h2{
        font-size:1.2rem;
    }

    .specialization-card p{
        font-size:0.95rem; line-height:1.5;
    }

    .specialization-card h4{
        font-size:0.9rem;
    }

    .specialization-card img{
        width:100%; height:auto;
    }
}