body{
    background-color: #0D1117;
}
.list1{
    display: flex;
    margin:15px 25px;
    gap: 100px;
    justify-content:flex-start;
    list-style: none;
    font-weight: 500;
}
.index{
    
    width: 50%;
}
.navBar{
    display: flex;
    justify-content: end;
}
.indexItem{
    text-decoration: none;
    color: #E0F7FA;
    transition: all;
    transition-duration: 0.5s;
}
.heroSection{
    width: 100%;
    height: 600px;
    display:flex;
    align-items: center; 
    
}
.photo{
    border:solid  #1FC2AE 3px;
    height: 300px;
    width:300px;
    margin:100px;
    border-radius:20% 30% 0 0;
    overflow: visible;
    display: flex;
    align-items: end;
    animation-name: popUp;
    animation-duration: 2s;
    transition: box-shadow, transform;
    transition-duration: 1.25s;
}
@keyframes popUp{
    0%{
        opacity: 0;
        transform: translateY(10px)
    }
    100%{
        opacity: 1;
    }
    
}
.photo:hover{
    box-shadow:0 0 40px #1FC2AE;
    transform: scale(1.1);
}
.intro{
    height:400px;
    width:800px;
    font-size: 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
}
.png{
     width: 100%;
     max-width: 100%;
     
}
.name{
    color: #1FC2AE;
    display: block;
    text-shadow: 0 0 50px;
    animation-name: fade;
    animation-duration: 2s;
}
@keyframes fade{
    0%{
        opacity: 0;
        transform: scale(1.1);
        box-shadow: 0 0 0;
    }
    100%{
        opacity: 1;
    }
}
.introText{
    font-size: 20px;
    color: #E0F7FA;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    animation-name: popLeft;
    animation-duration: 2s;
}
@keyframes popLeft{
    0%{
        opacity: 0;
        transform: translateX(10px)
    }
    100%{
        opacity: 1;
    }
    
}
.talk{
    text-decoration: none;
    font-family:sans-serif;
    max-width: fit-content;
    font-size: medium;
    color:#1FC2AE;
    padding: 10px;
    border: solid #1FC2AE 2px ;
    border-radius: 10px;
    transition: background-color,color;
    transition-duration: 1s;
}
.talk:hover{
    cursor: pointer;
    background-color: #1FC2AE;
    color: #0D1117;
}
.introStart{
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif ;
    font-size: 25px;
    color: #E0F7FA;
}
.indexItem:hover{
    color: #1FC2AE;
    text-shadow: 0 0 10px;
    padding-bottom: 2px;
}
.aboutMe{
    width: 100%;
    height: 400px;
    margin: auto;
    display: flex;
    gap: 20px;
    flex-direction: column;
    align-items: center;
}
p.aboutMe{
    width: 50%;
    font-size: larger;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    color: #E0F7FA;
}
h2{
    color: #1FC2AE;
}
.underLine{
    background-color: #1FC2AE;
    height: 2px;
    width: 400px;
    animation-name:strechIn ;
    animation-timing-function: ease-in-out;
    animation-duration: 2s;
}
@keyframes strechIn{
    0%{
        width: 0%;
    }
    100%{
        width: 400px;
    }
}
.skills{
    height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.skillsContainer{
    width: 75%;
    height: 500px;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
}
.skillCard{

    width: 200px;
    height: fit-content;
    background-color: #168679;
    text-align: center;
    border: solid #1FC2AE 2px;
    border-radius: 10px;
    padding: 30px 10px;
    transition:transform, box-shadow;
    transition-duration: 1s;
}
.skillCard:hover{
    transform: scale(1.12);
    box-shadow:0 0 50px #0D1117;


}
.power{
    font-size: 40px;
    font-weight: bold;
}
.speciality{
    font-size: larger;
    font-weight: bolder;
}
.projects{
    height: 600px;
    width: 40%;
    margin:0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}
.pro{
    background-color: #0D1117 ;
    border: solid #1FC2AE 2px ;
    height: 200px;
    width: 75%;
    border-radius: 20px;
    overflow: hidden;
    transition:transform, box-shadow;
    transition-duration: 1s;
}
.proIMG{
    width: 100%;
    height: 100%;
    
}
.pro:hover{
    transform: scale(1.12);
    box-shadow:0 0 50px #0D1117;
}
.contact{
    height: 300px;
    width: 40%;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap:20px;
    align-items:center;
}
.icon{
    max-width: 30px;
    color: #1FC2AE;
}
.contactContainer{
    border: solid #1FC2AE 2px ;
    background-color: #168679;
    width:100%;
    height: 300px;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}
.mail{
    text-decoration: none;
    color: #0D1117;
}

.social{
    display: flex;
    gap:20px
}
.S-icon{
    max-width:30px;
    transition: transform;
    transition-duration: 0.5s;
}
.S-icon:hover{
    transform: scale(1.2);
}