/*-------------------------------------------------Intro-----------------------------------------------------------*/

/*For your whole webpage*/
*{
    padding: 0;
    margin: 0;
    font-family: 'Poppins',sans-serif;
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
}
/*full webpage*/
body{
    background: #080808;
    color: #fff;
}
/*if you want to add a picture which is 
occupying full webpage but in one side just like me */
#header{
    width: 100%;
    height: 100vh;
    background-image: url(Image/My\ project.png);
    background-size:contain;
    background-position: right;
    background-repeat: no-repeat;
}
/*It is just a span tag class to design my name
don't worry!*/
.myname{
    font-family:cursive;
    font-size:30px;
    color: deeppink;
}
/*It can set your in my case in this class i took my
webpage name and all the navigation bars which takes 10pixels to top
and also Button and 5% to left and right side*/
.container{
    padding: 10px 5%;
}
/*This is a very importent tag for your navigation designing 
the flex display places the images and links side by side
but in this case all the navigation bars will be move to the
right side and don't placed correctly*/
nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
/*here the display list style and margin
places your navigation bar side by side or 
horizontally but the ancher is not revoved at all*/
nav ul li{
    display: inline;
    list-style: none;
    margin: 130px 50px;
}
/*To revove that underlines or ancher the text
decoration plays a very great role if you don't place
position = relative then the solid effect don't visible*/
nav ul li a{
    color: #fff;
    text-decoration:solid;
    font-size: 18px;
    position:relative;
}
/*It all are for hover effect to continue it please the
point width to 0*/
nav ul li a::after{
    content: '';
    width: 0;
    height: 3px;
    background: #ff004f;
    position:absolute;
    left: 0;
    bottom: -6px;
    transition: 0.5s;
}
/*It is for your hover effect*/
nav ul li a:hover::after{
    width: 100%;
}

.header-text{
    margin-top: 12%;
    font-size: 30px;
}

.header-text h1{
    font-size: 60px;
    margin-top: 20px;
}

#title{
    color:aqua;
}

.degree{
    color: deeppink;
}

nav .fa-solid{
    display: none;
}

@media only screen and (max-width: 600px) {
    #header{
        background-image: url(Image/My\ project\ 2.png);
    }
    .header-text{
        margin-top:100% ;
        font-size: 20px;
    }
    .header-text h1{
        font-size: 30px;
        text-shadow: transparent;
    }
    nav .fa-solid{
        display: block;
        font-size: 25px;
    }
    nav ul{
        background-color:#ff004f ;
        position:fixed;
        top: 0;
        right: -200px;
        width: 200px;
        height: 100vh;
        padding-top: 50px;
        z-index: 2;
        transition: right 0.5s;
    }
    nav ul li{
        display: block;
        margin: 25px;
    }
    nav ul .fa-solid{
        position:absolute;
        top: 25px;
        left: 25px;
        cursor: pointer;
    }
    .about-text h1{
        font-size: 40px;
    }
}

/*-------------------------------------------------------------------------About---------------------------------------------------------*/
#about{
    width: 100%;
    height: 100vh;
    background-color: #080808;
    display: flex;
    justify-self: center;
    align-items: center;
}

#about .content img{
    height: auto;
    width: 600px;
    max-width: 100%;
    border-radius: 40px;
}

.about-text{
    width: 550px;
    max-width: 100%;
    padding: 0 10px;
}

.content{
    width: 1280px;
    max-width: 95%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}

.about-text h1{
    color: #fff;
    font-size: 85px;
    margin-bottom:20px;
    text-transform: capitalize;
    font-family: system-ui;
}

.about-text h5{
    color:lightcoral;
    font-size: 25px;
    text-transform: capitalize;
    letter-spacing: 2px;
}

.about-text p{
    color:aliceblue;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 1px;
    margin-bottom: 45px;
    font-family:serif;
}

button{
    background-color: #ff004f;
    color: #080808;
    border: 2px solid transparent;
    text-decoration: none;
    padding: 10px 30px;
    border-radius: 30px;
    font-size: 17px;
}

button:hover{
    transform: scale(1.2);
    background-color: transparent;
    border: 2px solid #ffcc74;
    color: #ffcc74;
    transition: 0.4s;
    cursor: pointer;
}

@media screen and (max-width: 1180px) {
    #about{
        width: 100%;
        height: auto;
        padding: 70px 0px;
    }
}

@media screen and (max-width: 1180px) {
    .about-text h1{
        font-size: 40px;
        margin-bottom: 25px;
    }

    #about .content img{
        height: 10%;
        width: 200px;
        max-width: 80%;
    }
    .about-text p{
        letter-spacing: 0;
        margin-bottom: 10px;
    }
    .about-text h5{
        font-size: 21px;
    }
}
/*-----------------------------------------------------skills*--------------------------------------------------------*/

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins',sans-serif;
}

#nner{
    padding: 80px 0;
}

.eader{
    text-align: center;
    color: #fff;
    padding: 1rem;
    position: relative;
}

.eader:after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 4px;
    width: 100px;
    background-attachment:#2ecc71;
}

.ontainer{
   display: grid;
   grid-template-columns: repeat(3,1fr);
   justify-content: center;
   align-items: center;
   text-align: center;
   grid-gap: 1rem;
   padding: 1rem 80px;
   font-size: 1.2 rem; 
}

.skill-box{
     padding: 1rem;
     color: #ddd;
     cursor: pointer;
}


.skill-title{
     display: flex;
     flex-direction:column;
     align-items: center;
     padding: 0.5rem;
     margin-bottom: 0.5rem;
     position: relative; 
}



.skill-title h3{
    color: #fff;
    margin-top: 0.5rem;
}

.skill-icon{
    width:50px ; 
} 

@media screen and (max-width: 999px) {
    .ontainer{
        grid-template-columns: repeat(2,1fr);
        padding: 2rem 50px;
    }
}
@media screen and (max-width: 650px) {
    .ontainer{
        grid-template-columns: 1fr;
        padding: 2rem 50px;
    }
}

/*---------projects---------*/

#projects{
    padding: 30px 0;

}

.project-list{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    grid-gap: 40px;
    margin-top: 50px;
}

.project-list div{
    background-color: #262626;
    padding: 40px;
    font-size: 13px;
    font-weight: 300;
    border-radius: 10px;
    transition: background 0.5s, transform 0.5s;
}

.project-list div i{
    font-size: 50px;
    margin-bottom: 30px;
}

.project-list div h2{
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 15px;
    font-family: 'Franklin Gothic Medium';
}

.project-list div a{
    text-decoration: none;
    color: #fff;
    font-size: 12px;
    margin-top: 20px;
    display: inline-block;
}

.project-list div:hover{
    background: rgba(20, 35, 116, 0.308);
    transform: translateY(-10px);
}

.project-list div p{
    font-size: 20px;
    font-family: 'Trebuchet MS';
}

/*--------------------------------------------Achievements----------------------------------------------*/

#achievements{
    padding: 30px 0;

}

.achievement-list{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    grid-gap: 40px;
    margin-top: 50px;
}

.achievement-list div{
    background-color: #262626;
    padding: 40px;
    font-size: 13px;
    font-weight: 300;
    border-radius: 10px;
    transition: background 0.5s, transform 0.5s;
}

.achievement-list div i{
    font-size: 50px;
    margin-bottom: 30px;
}

.achievement-list div h2{
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 15px;
    font-family: 'Franklin Gothic Medium';
}

.achievement-list div a{
    text-decoration: none;
    color: #fff;
    font-size: 12px;
    margin-top: 20px;
    display: inline-block;
}

.achievement-list div:hover{
    background: #2ecc71;
    transform: translateY(-10px);
}

.achievement-list div p{
    font-size: 20px;
    font-family: 'Trebuchet MS';
}


/*--------------------------------------Contact Me------------------------------------------------*/

#contact{
    position: relative;
    min-height: 100vh;
    padding: 50px 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#contact .ct{
    max-width: 800px;
    text-align: center;
}

#contact .ct h1{
    font-size: 3em;
    color: #fff;
    font-weight:bolder;
    text-align: center;
}
#contact .ct p{
    font-size: 1.1em;
    color: #fff;
    font-weight: 300;
    text-align: center;
}

.co{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    margin-top: 30px;
}

.co .contactinfo{
    width: 50%;
    display: flex;
    flex-direction: column;
}

.co .contactinfo .box{
    position: relative;
    padding: 20px 0;
    display: flex;
    cursor: pointer;
}

.co .contactinfo .box .icon{
    min-width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.75em;
   color: #ff004f;
}

.co .contactinfo .box .text{
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    font-size: 1.1em;
    color:#fff;
    font-weight: 300;
}

.co .contactinfo .box .text h3{
    font-weight: 500;
    color: #2ecc71;
}

.co .contactinfo .box .text h3 .txt{
    color: #fff;
    margin-top: 50px;
    font-weight: 500;
    padding-left: 10px;
    border-left: 50px solid #ff004f;
    line-height: 1em;
}

.sci{
    position: relative;
    display: flex;
    gap:30px;
    margin: 20px 0;
}

.sci li{
    list-style:none;
}

.sci li a{
    color: #fff;
    font-size: 2em;
    transition: 0.5s;
}

.sci li a:hover{
    color: #2ecc71;
}

.contact-right from{
    width: 100%;
}

form input, form textarea{
    width: 100%;
    border: 0;
    outline: none;
    background: #262626;
    padding: 15px;
    margin: 15px 0;
    color: #fff;
    border-radius: 6px;
}

@media (max-width: 991px){
    #contact{
        padding: 50px;
    }
    .co .contactinfo .box .icon{
        min-width: 10px;
        height: 10px;
        display:ruby-text;
        justify-content:left;
        align-items:baseline;
        font-size: 1.00em;
        color: #ff004f;

    }
    .co{
        flex-direction: column;
    }

    .co .contactinfo,.co .contact-right{
        width: 100%;
    }

    .co .contact-right{
        padding: 20px;
    }
    #contact .ct h1{
        font-size: 30px;
        margin: 10px;
    }

    #contact .ct p{
        font-size: 0.99em;
    }
}

#msg{
    color: #61b752;
    margin-top: 10px;
    display: block;
}

.footer{
    padding: 30px 0;
    background-color: #262626;
    border-radius: 15px;
}

.footer .copyright{
    margin-top: 15px;
    text-align: center;
    font-size: 15px;
    color: #ddd;
}