* {
    margin:0;
    padding: 0;
    font-family: 'Times New Roman' ;
}



/* HEADRE STYLE... */
header {
    position: relative;
    background-color: rgb(255, 234, 43);
}

nav {
    padding:20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: auto;
}

nav ul {
    display: flex;
    height: 100%;
}

nav ul li {
   margin-right: 20px;
   
}


.logo-area h3{
    font-weight: bold;
    font-size: 18px;
}

nav ul li a, nav ul li {
    text-decoration: none;
    list-style: none;
    color: #000;
}




/* BODY STYLE */
body {

}

.hero-container{
    display: flex;
    gap: 10px;
    padding:20px;
    margin: 10px auto;
    
}
.hero-button{
    padding:10px;
    background-color: rgb(212, 197, 31);
    color:#fff;
    border: none;
    border-radius: 5px;
    width:140px;
    height: 50px;
    font-weight: bold;
}

.description-container {
    border: 1px solid rgb(196, 196, 196) !important;
    border-radius: 10px;
    text-align: center;
}

.description-container h1 {
    font-weight: bold;

}

.hero-image-container, .hero-image-container img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 2px 3px 4px rgb(206, 206, 206);
}

.cards-row{
    display: flex;
    align-items: center;
}

.card-items {
    background-color: #ffffff;
    border-radius: 10px;
    text-align: center;
    padding: 20px;
    margin: 15px;
    width: 300px;
    border: 1px solid #ccc;
}

.card-items h3 {
    font-weight: bolder;
    font-size: 50px;
    color:rgb(218, 199, 104)
}
.card-items p {
    font-size: 20px;
}

.about-hero-container{
    display: flex;
    justify-content: center;
    background-color: rgb(248, 248, 248);
    margin-bottom: 5%;
    padding: 5%;
}

.skills-list ul{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3%;
    font-size: 25px;
}

.skills-list ul li {
    margin: auto 20px;
}

.cards-item-container {
    align-items: center;
    width: 50%; 
    margin: 20px auto;

}

.cards-item-container .card {
    margin: 10px 20px;
    padding: 30px;
}

.contact-container {
    display: flex;
    margin: 4% auto;
    background-color: rgb(240, 240, 240);
    border-radius: 10px;
    padding: 25px;
}


.form {
    width: 50%;
    padding:20px;
    margin-top: 10px;
}

.form input {
    margin-bottom: 20px;
    padding:10px;
}

.project-cards{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin: 5% auto;

}

.project-cards img {
    width:500px;
    border-radius: 10px;

}

/* FOOTER STYLE... */




/* media query */

@media screen and (max-width: 760px) {
    nav {
        display: flex;
        flex-direction: column;
    }

    .hero-container {
        display: inline-block;
        gap: 20px;
        
    }

    .cards-row, .about-hero-container{
        display: flex;
        flex-direction: column;
    }
    
    .skills-list ul {
        display: inline-block;
    }

    .contact-container {
        display: inline-block;
    }

    .form {
        width: 100%;
        margin: 5px;
    }
    .cards-item-container {
        width: 100%;
    }
    .project-cards {
        display: inline-block;
    }
    .project-cards img {
        width: 370px;
        margin: 20px auto;
    }

}