:root {
    --header-height: 3.5rem;
    --first-color: hsl(186, 92%, 50%);
    --black-color: hsl(190, 22%, 10%);
    --white-color: hsl(0, 0%, 100%);
    --nav-shadow: 0 4px 16px hsla(190, 22%, 10%, 0.25);
    --normal-font-size: 0.938rem;
    --small-font-size: 0.813rem;
}


nav__buttons button { outline: none; border: none; background: none; font-family: inherit; cursor: pointer; }
nav ul { list-style: none; }
nav  a { text-decoration: none; color: inherit;direction:rtl; }

.containermenu { max-width: 100%; margin-inline: 1rem; }

.header { position: fixed; top: 0rem; left: 0; right: 0; z-index: 100;  }

.nav {
    height: var(--header-height);
    background-color: var(--black-color);
    padding: 0.5rem 1.5rem;
    border-radius: 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--nav-shadow);
}

.nav__logo { width: 40px; height: 40px; background-color: var(--white-color); border-radius: 50%; display: grid; place-items: center; transition: 0.3s; }
.nav__logo:hover { transform: scale(1.1); }

.nav__buttons { display: flex; align-items: center; column-gap: 0.5rem; }

/* Email Button Animation */
.nav__email {
    background-color: var(--white-color);
    color: var(--black-color);
    padding: 0.5rem 1rem;
    border-radius: 4rem;
    font-size: var(--small-font-size);
    position: relative;
    overflow: hidden;
    height: 40px;
}
.nav__email span { transition: 0.3s; display: block; }
.nav__email span:nth-child(2) { position: absolute; top: 25%; transform: translateY(200%); }
.nav__email:hover span:nth-child(1) { transform: translateY(-200%); }
.nav__email:hover span:nth-child(2) { transform: translateY(0); }

/* Toggle Button */
.nav__toggle { position: relative; width: 32px; height: 32px; display: grid; place-items: center; }
.nav__burger, .nav__close { position: absolute; transition: 0.3s; }
.nav__close { opacity: 0; }

/* Menu Mobile */
.nav__menu {
    position: fixed; top: 0; left: 0; right: 0; background-color: var(--black-color);
    padding: 6rem 2rem; border-radius: 2rem; box-shadow: var(--nav-shadow);
    opacity: 0; pointer-events: none; transition: 0.4s; transform: translateY(-100%);
}
.show-menu { opacity: 1; pointer-events: auto; transform: translateY(0); }
.show-icon .nav__burger { opacity: 0; }
.show-icon .nav__close { opacity: 1; }

.nav__list { display: flex; flex-direction: column; row-gap: 1.5rem; align-items: center; }
.nav__link { color: var(--white-color); font-weight: 600; overflow: hidden; display: block; height: 1.2rem; }
.nav__link span { transition: 0.3s; display: block; }
.nav__link span:nth-child(2) { transform: translateY(150%); }
.nav__link:hover span:nth-child(1) { transform: translateY(-150%); }
.nav__link:hover span:nth-child(2) { transform: translateY(-100%); }

/* Desktop */
@media screen and (min-width: 1150px) {
	
    .header { top: 0rem; }
    .nav { height: calc(var(--header-height) + 1rem); }
    .nav__toggle { display: none; }

    .nav__menu { position: static; opacity: 1; pointer-events: auto; transform: none; padding: 0; background: none; box-shadow: none; }
    .nav__list { flex-direction: row; column-gap: 2rem; }
}