/* ====================================
   Shared Components
==================================== */

.main-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 8%;

    background:#ffffff;

    position:sticky;

    top:0;

    z-index:1000;

    box-shadow:0 4px 15px rgba(0,0,0,.08);

}

.logo{

    font-size:1.5rem;

    font-weight:800;

    color:#5B4DFF;

}

.navbar{

    display:flex;

    gap:28px;

    align-items:center;

}

.navbar a{

    text-decoration:none;

    color:#444;

    font-weight:600;

    transition:.3s;

    position:relative;

}

.navbar a:hover{

    color:#5B4DFF;

}

.navbar a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:#5B4DFF;

    transition:.3s;

}

.navbar a:hover::after{

    width:100%;

}

/* Mobile */

@media(max-width:768px){

.main-header{

    flex-direction:column;

    gap:15px;

}

.navbar{

    flex-wrap:wrap;

    justify-content:center;

    gap:18px;

}

}