*{
    padding: 0px;
    margin: 0px;
    background-color: black;
    color: white;
    scroll-behavior: smooth;
    box-sizing: border-box;
}
body {
    width: 1300px;
}
#div1 {
    height: 40px;
    width: 1300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
@keyframes name{
    from{transform: rotate(0deg);}
    to{transform: rotate(360deg);}
}
#heading {
    background-color: black;
    display: inline-block;
    font-size: 30px;
    color: #4C5270;
    animation: name 1s linear 1ms 1 normal;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
nav {
    display: inline-block;
    width: 1300px;
}
#links {
    margin-left: 105px;
    display: inline-block;
    width: 250px;
    display: flex;
    justify-content: space-evenly;
    font-size: 50px;
}
#home_nav {
    display: block;
    float: right;
    margin-left: 120px;
    /* padding-right: 20px; */
    font-size: 1.1rem;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: rgb(224, 224, 224);
}
#home_nav a{
    text-decoration: none;
    margin-left: 30px;
}
#DivH2H1andP {
    width: 600px;
    display: inline-block;
}
#hero_name {
    display: block;
    margin-left: 120px;
    margin-top: 30px;
    h1{
        display: inline-block;
        padding: 5px;
        font-size: 50px;
    }
    h2{
        display: inline-block;
        font-size: 40px;
        color: rgb(224, 224, 224);
    }
    p {
        display: inline-block;
        width: 99%;
        text-transform:capitalize;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        color: rgb(224, 224, 224);
    }
}

#dp{
    height: 300px;
    width: 300px;
    border-radius: 50%;
    display: inline-block;
    margin-left: 13rem;
    margin-top: 1.1rem;
}
#dp img{
    height: 100%;
    width: 100%;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    object-fit: cover;
    display: inline-block;
}

/* ----------------------------------body-section--------------------------------------------- */

h6{
    display: inline-block;
    margin-left: 20px;
    margin-top: 70px;
    position: absolute;    
    transform: rotate(90deg);
    font-family: 'Courier New', Courier, monospace;
    color: #4C5270;

}

.vertical-line {
    display: inline-block;
    border-left: 2px solid #36EEE0; /* Creates the line */
    height: auto; /* Sets the height */
    margin-left: 65px; /* Optional: center it */
}

.dot1{
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background-color: aqua;
    margin-left: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    a{
        background-color: aqua;
        color: black;
        text-decoration: none;
    }
}

ul{
    margin-top: 130px;
    margin-left: 70px;
    display: inline-block;

}

/*---------------------------------Project-1----------------------------------------------- */

#project1 {
    height: 400px;
    width: 1140px;
    background-color: rgb(23, 23, 23);
    margin-top: 25px;
    padding-left: 40px;
    box-sizing: border-box;
    
    
}
#project1_inside_section1{
    background-color: rgb(23, 23, 23);
    width: 500px;
    height: 385px;
    display: inline-block;
    
    position: relative;
    bottom: 78px;
    h1{
        background-color: rgb(23, 23, 23);
        display: inline-block;
    }
    pre{
        font-size: medium;
        background-color: rgb(23, 23, 23);
        width: 500px;
        margin-top: 10px;
    }
    p{
        font-size: 20px;
        width: 500px;
        background-color: rgb(23, 23, 23);
        margin-top: 10px;
    }
}
#combi1{
    background-color: rgb(23, 23, 23);
    margin-top: 130px;
    font-size: 40px;
    a{
        background-color: rgb(157, 0, 255);
        text-decoration: none;
        font-size: 100%;
        border-radius: 5px;
        display: inline-block;
        
    }
}
#demo1{
    display: inline-block;
}
#git1{
    display: inline-block;
}

#project1_inside_section2{
    height: 380px;
    width: 535px;
    border: solid 2px black;
    display: inline-block;
    margin-top: 10px;
    margin-left: 30px;
    box-sizing: border-box;
}

#project1_inside_section2 img{
    height: 100%;
    width: 100%;
    object-fit: auto;
    display: inline-block;
}

/*---------------------------------Project2----------------------------------------------- */
#project2 {
    height: 400px;
    width: 1140px;
    background-color: rgb(23, 23, 23);
    margin-top: 25px;
    padding-left: 40px;
    box-sizing: border-box;
    
    
}
#project2_inside_section1 {
    background-color: rgb(23, 23, 23);
    width: 500px;
    height: 350px;
    display: inline-block;
    
    
    position: relative;
    bottom: 60px;
    h1{
        background-color: rgb(23, 23, 23);
        display: inline-block;
    }
    pre{
        font-size: medium;
        background-color: rgb(23, 23, 23);
        width: 500px;
        margin-top: 10px;
    }
    p{
        font-size: 20px;
        width: 500px;
        background-color: rgb(23, 23, 23);
        margin-top: 10px;
    }
}
#combi2{
    background-color: rgb(23, 23, 23);
    margin-top: 110px;
    font-size: 40px;
    a{
        background-color: rgb(157, 0, 255);
        text-decoration: none;
        font-size: 100%;
        border-radius: 5px;
        display: inline-block;
        
    }
}
#demo2{
    display: inline-block;
}
#git2{
    display: inline-block;
}

#project2_inside_section2{
    height: 380px;
    width: 535px;
    border: solid 2px black;
    display: inline-block;
    margin-top: 10px;
    margin-left: 30px;
    box-sizing: border-box;
}

#project2_inside_section2 img{
    height: 100%;
    width: 100%;
    object-fit: auto;
    display: inline-block;
}

/* --------------------------------------project-3-css------------------------------------------- */
#project3 {
    height: 400px;
    width: 1140px;
    background-color: rgb(23, 23, 23);
    margin-top: 25px;
    padding-left: 40px;
    box-sizing: border-box;
    
    
}
#project3_inside_section1 {
    background-color: rgb(23, 23, 23);
    width: 500px;
    height: 350px;
    display: inline-block;
    
    
    position: relative;
    bottom: 60px;
    h1{
        background-color: rgb(23, 23, 23);
        display: inline-block;
    }
    pre{
        font-size: medium;
        background-color: rgb(23, 23, 23);
        width: 500px;
        margin-top: 10px;
    }
    p{
        font-size: 20px;
        width: 500px;
        background-color: rgb(23, 23, 23);
        margin-top: 10px;
    }
}
#combi3{
    background-color: rgb(23, 23, 23);
    margin-top: 110px;
    font-size: 40px;
    a{
        background-color: rgb(157, 0, 255);
        text-decoration: none;
        font-size: 100%;
        border-radius: 5px;
        display: inline-block;
        
    }
}
#demo3{
    display: inline-block;
}
#git3{
    display: inline-block;
}

#project3_inside_section2{
    height: 380px;
    width: 535px;
    border: solid 2px black;
    display: inline-block;
    margin-top: 10px;
    margin-left: 30px;
    box-sizing: border-box;
}

#project3_inside_section2 img{
    height: 100%;
    width: 100%;
    object-fit: auto;
    display: inline-block;
}

/*----------------------------------------Education----------------------------------------*/

#education{
    margin-top: 150px;
    
}
#education h1{
    font-size: 50px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

}
#education p{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin-top: 20px;
}
#section1{
    height: 2px;
    width: 1100px;
    background-color: blue;
    margin-top: 10px;
}
#lpu{
    height: 180px;
    width: 50%;
    margin-top: 10px;
    display: inline-block;
}
#lpu_name{
    display: inline-block;
    height: 20px;
    width: 65%;
    position: relative;
    bottom: 35%;
    p{
        display: inline-block;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
}
#lpu_logo{
    display: inline-block;
}
#lpu_logo img{
    height: 170px;
    width: 100%;
    border-radius: 50%;
    object-fit: auto;
    display: inline-block;
}
#skills{
    margin-top: 50px;
    h1{
        font-size: 50px;
    }
    p{
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

    }
}
#skills_img{
    height: 200px;
    width: 1100px;
    margin-top: 25px;
    h2{
        display: flex;
        justify-content: center;
    }

}
#skill_box{
    display: flex;
    justify-content: space-evenly;
    margin-top: 20px;
}
#html img{
    height: 180px;
    width: 250px;
    display: inline-block;
    border-radius: 20px;
}
#css img{
    height: 180px;
    width: 250px;
    display: inline-block;
}
#js img{
    height: 180px;
    width: 250px;
    display: inline-block;
    border-radius: 20px;
}
#links_bottom {
    margin-left: 1070px;
    margin-top: 290px;
    display: inline-block;
    width: 170px;
    display: flex;
    justify-content: space-evenly;
    font-size: 40px;
}

/*-------------------------------------------------Rock-paper-game---------------------------------------------------*/
#rock-paper-game-project4 {
    height: 400px;
    width: 1140px;
    background-color: rgb(23, 23, 23);
    margin-top: 25px;
    padding-left: 40px;
    box-sizing: border-box;
    
    
}
#project4_inside_section1 {
    background-color: rgb(23, 23, 23);
    width: 500px;
    height: 385px;
    display: inline-block;
    
    position: relative;
    bottom: 78px;
    h1{
        background-color: rgb(23, 23, 23);
        display: inline-block;
    }
    pre{
        font-size: medium;
        background-color: rgb(23, 23, 23);
        width: 500px;
        margin-top: 10px;
    }
    p{
        font-size: 20px;
        width: 500px;
        background-color: rgb(23, 23, 23);
        margin-top: 10px;
    }
}
#combi4{
    background-color: rgb(23, 23, 23);
    margin-top: 130px;
    font-size: 40px;
    a{
        background-color: rgb(157, 0, 255);
        text-decoration: none;
        font-size: 100%;
        border-radius: 5px;
        display: inline-block;
        
    }
}
#demo4{
    display: inline-block;
}
#git4{
    display: inline-block;
}

#project4_inside_section2{
    height: 380px;
    width: 535px;
    border: solid 2px black;
    display: inline-block;
    margin-top: 10px;
    margin-left: 30px;
    box-sizing: border-box;
}

#project4_inside_section2 img{
    height: 100%;
    width: 100%;
    object-fit: auto;
    display: inline-block;
}

/*------------------------------------------Currency Converter project 5-------------------------------------------*/

#currency-converter-project-5 {
    height: 400px;
    width: 1140px;
    background-color: rgb(23, 23, 23);
    margin-top: 25px;
    padding-left: 40px;
    box-sizing: border-box;
    
    
}
#project5_inside_section1 {
    background-color: rgb(23, 23, 23);
    width: 500px;
    height: 385px;
    display: inline-block;
    
    position: relative;
    bottom: 90px;
    h1{
        background-color: rgb(23, 23, 23);
        display: inline-block;
    }
    pre{
        font-size: medium;
        background-color: rgb(23, 23, 23);
        width: 500px;
        margin-top: 10px;
    }
    p{
        font-size: 20px;
        width: 500px;
        background-color: rgb(23, 23, 23);
        margin-top: 10px;
    }
}
#combi5{
    background-color: rgb(23, 23, 23);
    margin-top: 110px;
    font-size: 40px;
    a{
        background-color: rgb(157, 0, 255);
        text-decoration: none;
        font-size: 100%;
        border-radius: 5px;
        display: inline-block;
        
    }
}
#demo5{
    display: inline-block;
}
#git5{
    display: inline-block;
}

#project5_inside_section2{
    height: 380px;
    width: 535px;
    border: solid 2px black;
    display: inline-block;
    margin-top: 10px;
    margin-left: 30px;
    box-sizing: border-box;
}

#project5_inside_section2 img{
    height: 100%;
    width: 100%;
    object-fit: auto;
    display: inline-block;
}

/*--------------------------------------------------TicTacToe-project-6-----------------------------------------------------*/

#TicTacToe-project-6 {
    height: 400px;
    width: 1140px;
    background-color: rgb(23, 23, 23);
    margin-top: 25px;
    padding-left: 40px;
    box-sizing: border-box;
    
    
}
#project6_inside_section1 {
    background-color: rgb(23, 23, 23);
    width: 500px;
    height: 350px;
    display: inline-block;
    
    
    position: relative;
    bottom: 60px;
    h1{
        background-color: rgb(23, 23, 23);
        display: inline-block;
    }
    pre{
        font-size: medium;
        background-color: rgb(23, 23, 23);
        width: 500px;
        margin-top: 10px;
    }
    p{
        font-size: 20px;
        width: 500px;
        background-color: rgb(23, 23, 23);
        margin-top: 10px;
    }
}
#combi6{
    background-color: rgb(23, 23, 23);
    margin-top: 110px;
    font-size: 40px;
    a{
        background-color: rgb(157, 0, 255);
        text-decoration: none;
        font-size: 100%;
        border-radius: 5px;
        display: inline-block;
        
    }
}
#demo6{
    display: inline-block;
}
#git6{
    display: inline-block;
}

#project6_inside_section2{
    height: 380px;
    width: 535px;
    border: solid 2px black;
    display: inline-block;
    margin-top: 10px;
    margin-left: 30px;
    box-sizing: border-box;
}

#project6_inside_section2 img{
    height: 100%;
    width: 100%;
    object-fit: auto;
    display: inline-block;
}

/* 3D card effect for all project containers */

#project1, #project2, #project3, #rock-paper-game-project4, #currency-converter-project-5, #TicTacToe-project-6 {
    transition: transform 0.6s ease, box-shadow 0.3s ease;
    transform-style: preserve-3d;
    perspective: 1000px;
    cursor: pointer;
}
#project1.show-on-scroll,
#project2.show-on-scroll,
#project3.show-on-scroll,
#rock-paper-game-project4.show-on-scroll,
#currency-converter-project-5.show-on-scroll,
#TicTacToe-project-6.show-on-scroll {
    animation: slideInFromLeft 1s ease forwards;
}

#project1:hover,
#project2:hover,
#project3:hover,
#rock-paper-game-project4:hover,
#currency-converter-project-5:hover,
#TicTacToe-project-6:hover {
    transform: rotateY(5deg) scale(1.03);
    box-shadow: 0 20px 40px rgba(0, 255, 255, 0.2);
}

/* Floating image effect inside the card */
#project1_inside_section2 img,
#project2_inside_section2 img,
#project3_inside_section2 img,
#project4_inside_section2 img,
#project5_inside_section2 img,
#project6_inside_section2 img {
    transition: transform 0.5s ease;
}
#project1:hover img,
#project2:hover img,
#project3:hover img,
#rock-paper-game-project4:hover img,
#currency-converter-project-5:hover img,
#TicTacToe-project-6:hover img {
    transform: scale(1.05) rotateY(3deg);
}

/* Animation keyframes for slide + fade */
@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-100px) rotateY(-10deg);
    }
    100% {
        opacity: 1;
        transform: translateX(0) rotateY(0deg);
    }
}

@keyframes slideInFromRight {
    0% {
        opacity: 0;
        transform: translateX(100px) rotateY(10deg);
    }
    100% {
        opacity: 1;
        transform: translateX(0) rotateY(0deg);
    }
}

/* Apply alternating animation */
#project1, #project3, #currency-converter-project-5 {
    animation: slideInFromLeft 1s ease forwards;
    opacity: 0;
}
#project2, #rock-paper-game-project4, #TicTacToe-project-6 {
    animation: slideInFromRight 1s ease forwards;
    opacity: 0;
}

#skills, #education {
    opacity: 0;
    transform: translateY(50px); /* Slide up look */
}

#skills.show-on-scroll,
#education.show-on-scroll {
    animation: fadeSlideUp 1s ease forwards;
}

/* Optional: Custom animation */
@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* -----------------------------------------------------Media-queries--------------------------------------------------------------------- */
/* will be added soon */
/* -------------------------------------media-ended----------------------------------------------- */