html {
    scroll-behavior: smooth;
}

* {
    padding: 0;
    margin: 0;
    outline: none;
    border: none;
    box-sizing: border-box;
    color: #dce1de;
    /* font-size: x-large; */

}

body {
    /* font-family: 'Segoe Print', 'Patrick Hand', sans-serif; */
    background-color: #2e4a6d;
    /* background-image: url(images/2nd-bg.jpg); */


    font-family:  "Patrick Hand SC","Indie Flower" , cursive;
    font-weight: 1;
    font-style: normal;
    font-size: 2rem;
}



body p, h1, h2, h3, h4{
    cursor: default;
}

a {
    text-decoration: none;
}



nav {
    position: sticky;
    margin: 0rem 0rem;
    width: 100%;
    height: 5rem;
    /* border-radius: 1rem; */
    background-color: #1f2421;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 2rem;
    /* position: fixed; */

}

.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 8rem;
}

.link a {
    color: #fff;
}

.link a:hover {
    color: #2e4a6d;
}

.nav-logo {
    flex: 0.9;
}

.nav-logo a {
    color: #2e4a6d;
}

.ham {
    display: none;
    cursor: pointer;
}

#ham-btn {
    background-color: #1f2421;
}

.mobile-menu {
    display: none;
}

.mobile-menu.active {
    display: block;
}


.mobile-menu li {
    /* text-align: center; */
    padding: 0.3rem;

}

.container {
    margin-top: 1rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 0rem 5rem;
    /* background-image: url(images/image.png); */
    background-size: no-repeat;


}

#main-img {
    text-align: center;
}

#main-img img {
    /* margin: 5rem; */
    width: 30rem;
    height: auto;
    border-radius: 50%;
    padding-top: 0;
    margin-top: 0;
}

#hero-intro {
    text-align: center;
}

header h1 {
    /* margin: 1rem 1rem; */
}

header h1.name {}

header h4 {
    padding: 1rem 1rem;
}

header p {
    padding: 0.6rem 0.2rem;
}

#my-name {
    -webkit-text-stroke: 0.05rem #4fae5c;
    color: #fff;
}

#devo{
    color: #000;
}
                                        /* Skills */
#skills{
    display: flex;

}


                                         /* skils -section */
.skills-section {
    /* margin-top: 1rem; */
    width: 100%;
    /* height: 50rem; */
    padding: 0rem 2rem;
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;

    color: #000;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 4rem;

    justify-content: space-evenly;
}


#skills-section-div-container{
    display: flex;
    margin-top: 10px;
}
#skillsFirstDiv{
    width: 55%;
    border-top:2px solid black;
    border-right:2px solid black;
    border-bottom:2px solid black;
}
#skillsSecondDiv{
    width: 45%;
    border-top:2px solid black;
    border-bottom:2px solid black;
    padding: 0px 40px;
}
#skillsSecondDiv h1{
    text-align: center;
}

.skill-card {
    display: flex;
    flex-direction: column;
    color: #fff;
    background-color: transparent;
    height: 8rem;
    width: 8rem;
    font-size: 1.5rem;
    border-radius: 1rem;
    padding-top: 0rem;
    margin: 2rem 0rem;
    justify-content: center;
    text-align: center;
    text-align: center;

}
.fa-brands{
    font-size: 5rem;
}

.skill-card img {
    width: 8rem;

}

                                                 /* footer */

#footer {
    background-color: #1f2421;
    color: #f1f1f1;
    padding: 1rem 1rem;
    text-align: center;
}

#footer_main {
    margin-bottom: 1rem;
}

#footer_main a {
    margin: 0 10px;
}

#footer_main img {
    filter: invert(100%);
}

#footer_icon {
    color: #c0c0d0;
}


                                    /* project : php-forum */

#project{
    margin: 2rem 5rem ;
}
#project h2{
    text-align: center;
    
}

#php-video{
    display: flex;
    align-items: center;
    justify-content: center;
}
#php-video video{
    height: 20rem;
    width: auto;
    opacity: 1;
}
#php-intro{
    margin: 0rem 2rem;
}
.php-project{
    display: flex;
    flex-direction: row;
}

h1,h2,h3,h4{
    color: #000;
}



#qureySolver {
    display: inline-block; /* important for transform to work */
    padding: 0rem 1rem;
    background-color: rgb(46,46,192);
    color: white;
    font-size: 1.5rem; 
    border:2px solid white ; 
    border-radius: 5px;

    cursor: pointer;
    transition: transform 0.2s, background-color 0.3s;
}
#qureySolver:hover {
    transform: translateY(-2px);
}