.mySlides {
    display:none;
    position: relative;
    background-color: white;
    width: 100%;
    height: 95%;
    /* background-color: white; */
    border-radius: 20px;
    /* padding: 20px; */
    padding-top: 20px;
    padding-bottom: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.project_slide .project_item{
    /* background-color: purp/le; */
    height: 100%;
    display: flex;
    align-items: center;     /* ✅ vertically centers content */
    justify-content: center; /* ✅ horizontally centers content */
    
}

.project_slide .slide-container {
    /* background-color: red; */
    height: 95%;
    width: 90%;

}

.w3-button{
    border-radius: 20px;
    font-size: 12px;
    border: 0px;
    background-color: white;
    padding: 5px;
}

.w3-button:hover {
            transform: translateY(-6px);
            box-shadow: 0 10px 18px rgba(0, 0, 0, 0.15);
        }

.demo{
    width: 20px;
    height: 20px;
    border-radius: 25px;
    font-size: 12px;
    border: 0;
    display: flex;
    align-items: center;     /* ✅ vertically centers content */
    justify-content: center; /* ✅ horizontally centers content */
    
}

.demo.active {
  background-color: #007bff; /* blue example */
  color: white;
  border-radius: 5px; /* optional for rounded look */
}

.w3-section{
    margin-bottom: 0 !important;
    padding-bottom: 0;
}

.w3-content{
    width: 100%;
}

.card_pages{
    padding-top: 5px;
    /* background-color: yellow; */
    display: flex;
    flex-direction: column;
    gap: 5px; /* Adds spacing between .card_btn and .card_page */
}

.card_btn, .card_page{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.projectskill{
    display: flex;
    gap: 10px;
}

.projectname{
    /* background-color: yellow; */
    height: 10%;
    font-size: 19px;
    font-weight: bolder;
    padding-left: 20px;
    padding-right: 20px;
    font-family: "Titan One", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.projectcontent{
    /* background-color: blue; */
    height: 80%;

}

.projectcontent .projectimg{
    height: 50%;
    background-color: #c6ffca;
    display: flex;
    align-items: center;     /* ✅ vertically centers content */
    justify-content: center; /* ✅ horizontally centers content */
    
}

.projectimg img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* keeps aspect ratio, fits inside */
}

.projectcontent .projectdesc{
    height: 40%;
    /* background-color: yellow; */
    font-size: 15px;
    font-family: "Figtree", sans-serif;
    font-weight: bold;
    padding: 30px;
}

.projectskill{
    /* background-color: white; */
    height: 10%;
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 10px; /* space between items */
        padding-left: 20px;
    padding-right: 20px;
}

.projectskill .psitem{ 
    border-radius: 25px; 
    background-color: red; 
    display: flex; 
    align-items: center; /* ✅ vertically centers content */ 
    justify-content: center; /* ✅ horizontally centers content */ 
    height: 15px; 
    padding: 15px; 
}

@media (max-width:803px){
    .projectcontent .projectdesc{
        height: 40%;
        /* background-color: yellow; */
        font-size: 14px;
        font-family: "Figtree", sans-serif;
        font-weight: bold;
        padding: 30px;
    }

    .projectname{
    /* background-color: yellow; */
    height: 7%;
    font-size: 19px;
    font-weight: bolder;
    padding-left: 20px;
    padding-right: 20px;
}
}

@media (max-width: 600px) {

.projectname{
    /* background-color: yellow; */
    height: 7%;
    font-size: 15px;
    font-weight: bolder;
    padding-left: 20px;
    padding-right: 20px;
}

.projectname.fyp{
    font-size: 10px;
}

.projectcontent .projectdesc{
    height: 40%;
    /* background-color: yellow; */
    font-size: 10px;
    font-family: "Figtree", sans-serif;
    font-weight: bold;
    padding: 20px;
}

.projectskill{
    position:absolute;
    /* bottom: 10; */
    /* left: 5; */
    bottom: 12px;
    left: 10px;
    right: 10px;

    /* background-color: white; */
    height: unset;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px; /* space between items */
}

.projectskill .psitem{
    border-radius: 25px;
    background-color: red;
    display: flex;
    align-items: center;     /* ✅ vertically centers content */
    justify-content: center; /* ✅ horizontally centers content */
    font-size: 10px;
    height: 5px;
    padding: 10px;
    flex: 1 1 25%; /* each takes about half width on small screens */
}
}

@media (max-width: 500px) {
.projectname{
    /* background-color: yellow; */
    height: 7%;
    font-size: 12px;
    font-weight: bolder;
    padding-left: 20px;
    padding-right: 20px;
}


.projectname.fyp{
    font-size: 10px;
}

.projectcontent .projectimg{
    height: 35%;

}

.projectcontent .projectdesc{

    font-size: 10px;
    /* color: red; */

}

.projectskill .psitem{
    font-size: 10px;
    height: 5px;
    padding: 10px;
    flex: 1 1 25%;
}

.w3-button{
    font-size: 20px;
}


}

.projectskill .psitem.pdjango{
    background-color: #092E20;
    color: white;
}

.projectskill .psitem.parduino{

    background-color: #00979D;
    color: white;
}
.projectskill .psitem.pphp{

    background-color: #777BB4;
    color: white;
}
.projectskill .psitem.pmysql{

    background-color: #4479A1;
    color: white;
}
.projectskill .psitem.pbootstrap{

    background-color: #7952B3;
    color: white;
}
.projectskill .psitem.plinux{

    background-color: #000000;
    color: white;
}
.projectskill .psitem.pgcp{

    background-color: #4285F4;
    color: white;
}
.projectskill .psitem.pvue3{

    background-color: #42B883;
    color: white;
}
.projectskill .psitem.ppsql{

    background-color: #336791;
    color: white;
}
.projectskill .psitem.pgit{

    background-color: #181717;
    color: white;
}
.projectskill .psitem.pcicd{

    background-color: #FCA121;
    color: white;
}
.projectskill .psitem.pproxy{

    background-color: #008080;
    color: white;
}