.navWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px;
    background: white;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
}
.navbar {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--max-content-width);
}

.navLogo img {
    height: 50px;
    user-select: none;
    -webkit-user-drag: none;
}

.rightWrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    margin-left: auto;
    margin-right: 18px;
}

.blogButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary), #245d98);
    color: white;
    font-family: var(--secondary-font);
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(21, 55, 88, 0.18);
}

.blogButton:hover {
    opacity: 0.7;
}

.actionWrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 100px;
    margin-left: -100px;
}

.actionWrapper a {
    background: none;
    text-align: left;
    padding: 0;
    font-size: 15px;
    font-family: var(--secondary-font);
    font-weight: 500;
}

.actionWrapper a i {
    margin-right: 5px;
    font-size: 18px;
    font-weight: lighter;
}

.actionBtnPrimary {
    color: #2a74c9;
}
.actionBtnSecondary {
    color: #288351;
}
.actionBtnTertiary {
    color: #db8222;
}

.actionWrapper a:hover {
    opacity: 0.7;
}

.socialWrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
}

.socialItem {
    font-size: 22px;
    background: linear-gradient(
        45deg,
        var(--primary),
        var(--primary),
        var(--secondary)
    );
    background-clip: text;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@media (max-width: 1000px) {
    .navbar {
        width: 95%;
    }
    .actionWrapper {
        display: none;
    }
}

@media (max-width: 550px) {
    .navLogo img {
        height: 30px;
    }

    .rightWrapper {
        margin-right: 10px;
    }

    .blogButton {
        padding: 8px 14px;
        font-size: 14px;
    }
}