*{
    border: none;
    margin: 0;
    font-family: 'Inter', sans-serif;
    position: relative;
}

/* header */

header{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap:30px;
    padding: 20px 100px;
    align-content: center;
    box-shadow: 3px 5px 6px -6px #777;
    border-bottom:2px solid rgba(119, 119, 119, 0.425);
}

.icon-heading{
    order: 2;
    flex-grow: .5;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    font-size: 25px;
    color: #5C5C5C;
}
.icon-heading::before{
    background-image: url("../images/icon.svg");
    content: "";
    background-size: 50px;
    width: 50px; 
    height: 50px;
}

nav{
    order:3;
    flex-grow: 4;
    list-style:none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
}

nav .list-items{
    flex-grow: 1;
    text-align: center;
    font-size:18px;
    color:#6C5CE7;
}

nav li:first-child{
    color:#2D3436;
    font-weight: bold;
}

header .sign-in-btn{
    order:4;
    flex-grow: 1;
    text-align: center;
    font-size:18px;
    background-color: #6C5CE7;
    color: white;
    padding : 1.3% 2%;
    border-radius: 30px;
    min-width: fit-content;
    max-width: 30%;
}

/* Header media query */
@media screen and (max-width: 768px) {
    header{
        padding: 10px 20px;
        justify-content: space-between;
        width:auto;
    }

    nav {
      display:none;
    }

    .icon-heading::before{
        background-image: url("../images/hamburger.svg");
        content: "";
        background-size: 40px;
        width: 40px; 
        height: 40px;
    }

    header .sign-in-btn{
        border-radius: 10px;
    }
}