.whole__navbar {

    /* Layout */

    display: flex;
    flex-direction: column;
    padding: 0 6vw;

    /* Style */

    background-color: var(--white-color);

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 99;

    position: sticky;
    top: 0;

    .top__bar {

        /* Layout */

        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 14px 20px;

        /* Style */

        background: var(--primary-color);
        border-radius: 0 0 4px 4px;

        .personal__details .text,
        .personal__details {
            display: flex;
            align-items: center;
        }

        .personal__details .text {

            /* Layout */

            gap: 10px;

            padding: 0 20px 0 0;

            /* Style */

            color: var(--white-color);

            font-size: 14px;

            >i {
                font-size: 20px;
            }
        }

        .personal__details .text:last-child {

            /* Layout */

            padding: 0 0 0 20px;

            /* Style */

            border-left: 1px solid var(--white-color);
        }

        .social__links {
            display: flex;
            align-items: center;
            gap: 20px;

            .social__icon {
                color: var(--white-color);
                font-size: 20px;
            }
        }

    }

}

.nav__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 16px 0;

    z-index: 99;

    .logo img {
        width: 340px;
    }

    /* menu icon */

    .menu {
        display: none;
        flex-direction: column;
        width: 34px;
        align-items: end;
        cursor: pointer;
        height: fit-content;
    }

    .menu span {
        background: var(--dark-color);
        border-radius: 10px;
        height: 3px;
        margin: 4px 0;
        transition: .4s cubic-bezier(0.68, -0.6, 0.32, 1.6);

    }

    .menu span:nth-of-type(1) {
        width: 50%;
    }

    .menu span:nth-of-type(2) {
        width: 100%;
    }

    .menu span:nth-of-type(3) {
        width: 75%;

    }

    .menu input[type="checkbox"] {
        display: none;
    }

    .menu input[type="checkbox"]:checked~span:nth-of-type(1) {
        transform-origin: bottom;
        transform: rotatez(45deg) translate(-8px, 10px)
    }

    .menu input[type="checkbox"]:x ed~span:nth-of-type(2) {

        transform-origin: top;
        transform: rotatez(-45deg)
    }

    .menu input[type="checkbox"]:checked~span:nth-of-type(3) {
        transform-origin: bottom;
        width: 50%;
        transform: translate(0px, -8px) rotatez(45deg);
    }

}

.nav__links {
    display: flex;
    align-items: center;
    gap: 30px;

    .link {

        color: var(--dark-color);

        font-size: 14px;
        line-height: 14px;
        font-weight: 700;
        letter-spacing: 0.6px;
        text-transform: uppercase;

        transition: .3s;
    }

    .link.active,
    .link:hover {
        color: var(--primary-color);
    }
}

.btns {
    display: flex;
    align-items: center;
    gap: 30px;

    .sec__btn {
        display: flex;
        align-items: center;
        gap: 16px;

        >i {

            /* Layout */

            display: flex;
            align-items: center;
            justify-content: center;

            width: 50px;
            height: 50px;

            /* Style */

            font-size: 24px;
            color: var(--white-color);

            border-radius: 50%;
            background: var(--primary-color);
        }

        .btn__context {
            display: flex;
            flex-direction: column;
            gap: 10px;

            .text {
                color: var(--primary-color);
                font-weight: 600;
                line-height: 14px;
                font-size: 14px;
                text-transform: uppercase;
            }

            .number {
                color: var(--dark-color);
                font-weight: 600;
                font-size: 18px;
                line-height: 18px;
            }
        }
    }

    .btn {

        /* Layout */

        padding: 20px 25px;

        /* Style */

        background: var(--dark-color);
        color: var(--white-color);
        border-radius: 5px;
        text-transform: uppercase;
        font-size: 15px;
        line-height: 15px;
        font-weight: 600;
        letter-spacing: 0.6px;

        transition: .3s;
    }

    .btn:hover {
        background: var(--primary-color);
    }
}




@media (max-width: 1362px) {

    .whole__navbar {
        .nav__bar {

            .nav__links {
                position: fixed;

                align-items: center;
                flex-direction: column;
                justify-content: center;
                background-color: var(--primary-color);
                inset: 0;

                display: none;

                .link {
                    color: var(--white-color);
                }

                .link:hover,
                .link.active {
                    color: var(--white-color);
                }
            }

            .active__navLinks {
                display: flex;
            }

            .menu {
                z-index: 999;
                display: flex;
            }


        }
    }
}




@media (max-width: 962px) {
    .whole__navbar {
        .top__bar {
            display: none;
        }

        .nav__bar {
            .btns {

                .sec__btn,
                .btn {
                    display: none;
                }
            }
        }
    }
}




@media (max-width: 648px) {
    .whole__navbar {
        .nav__bar {
            .logo img {
                width: 260px;
            }
        }
    }
}