.c-header { max-width: 132rem; width: 100%; display: block; position: relative; margin: 0 auto; margin-top: 6.9rem; } .c-header-article { display: flex; align-items: center; justify-content: space-between; gap: 13.6rem; width: 100%; position: relative } .c-header-links { display: flex; align-items: center; gap: 8rem; } .c-header-links-item { display: block; margin: 0; padding: 0; } .c-header-links-item-ul { display: flex; align-items: center; justify-content: space-between; gap: 3.4rem; margin: 0; padding: 0; } .c-header-links-item-li { list-style: none; } .c-header-links-item-a { font-family: "Stolzl", san-serif; font-Weight: 400; font-size: 1.6rem; line-height: 19.2px; color: rgba(255, 255, 255, 1); text-decoration: none; } .c-header-active { color: rgba(1, 120, 254, 1); } .c-header-logo-svg { width: 148px; height: 60px; } .c-header-links-item-btn { display: flex; justify-content: space-between; align-items: center; gap: 0.7rem; background-color: transparent; border: none; padding: 0; margin: 0; cursor: pointer; text-decoration: none; } .c-header-links-item-btn-span { font-family: "Stolzl", san-serif; font-Weight: 500; font-size: 1.6rem; line-height: 19.2px; color: rgba(255, 255, 255, 1); } .c-header-login-register { display: flex; justify-content: space-between; align-items: center; gap: 2.8rem; margin: 0; padding: 0; } .c-header-login-register-item { margin: 0; padding: 0; display: block; } .c-header-login-register-a { display: flex; justify-content: space-between; align-items: center; gap: 1.1rem; margin: 0; padding: 0; text-decoration: none; width: 100%; } .c-header-login-register-span { font-family: "Stolzl", san-serif; font-Weight: 400; font-size: 1.6rem; line-height: 16.17px; color: rgba(255, 255, 255, 1); } .c-header-login-register-btn { background-color: transparent; border: none; text-align: center; padding: 1.7rem 4.8rem; background-image: url("../img/rectangle.svg"); background-origin: border-box; background-position: center; background-repeat: no-repeat; background-size: contain; cursor: pointer; position: relative; height: 50.04px; width: 238.06px; } .c-header-login-register-btn::after { display: block; content: ""; background-image: url("../img/subtract.svg"); background-origin: border-box; background-position: center; background-repeat: no-repeat; background-size: contain; position: absolute; top: 1%; right: -0.3rem; width: 25px; height: 50px; } .c-header-login-register-btn-span { font-family: "Stolzl", san-serif; font-Weight: 400; font-size: 1.6rem; line-height: 16.17px; color: rgba(255, 255, 255, 1); } .c-header-btn-mobil { display: none; align-items: flex-start; justify-content: space-between; flex-direction: column; gap: 0.5rem; background-color: transparent; border: none; padding: 0; margin: 0; cursor: pointer; width: 2rem; height: 1.6rem; position: absolute; right: 0; z-index: 10; } .c-header-btn-mobil-span:nth-child(1) { height: 0.2rem; width: 100%; background-color: rgba(1, 120, 254, 1); } .c-header-btn-mobil-span:nth-child(2) { height: 0.2rem; width: 1.3rem; background-color: rgba(1, 120, 254, 1); } .c-header-btn-mobil-span:nth-child(3) { height: 0.2rem; width: 100%; background-color: rgba(1, 120, 254, 1); } .c-header-lang-mobi { display: none; } @media (max-width: 1250px) { .c-header { max-width: 95%; } .c-header-article { gap: 5rem; } .c-header-links-item-ul { gap: 2.4rem; } .c-header-links { gap: 6rem; } .c-header-login-register-item { width: 95%; } } @media (max-width: 1120px) { .c-header-article { gap: 3rem; } .c-header-logo-svg{ width: 120px; height: 60px; } .c-header-login-register-item { width: 85%; } .c-header-links { gap: 3.5rem; } .c-header-login-register { gap: 1.8rem; } .c-header-links-item-ul { gap: 2rem; } .c-header-login-register-btn::after { top: 3%; right: -0.3rem; width: 25px; height: 48px; } .c-elipse-2 { left: 55%; } } @media (max-width: 990px) { .c-header { margin-top: 2.4rem; max-width: 100%; padding-right: 1.6rem; padding-left: 1.6rem; padding-top: 2.4rem; } .c-header-logo-svg { width: 111px; height: 45px; } .c-header-btn-mobil { display: flex; } .c-header-links { display: none; } .c-header-login-register { display: none; } .c-header-logo { left: 0; position: absolute; z-index: 1; } .c-header-article.actived { flex-direction: column; gap: 0; justify-content: center; align-items: center; } .c-header-links.actived { flex-direction: column; gap: 0; justify-content: center; align-items: center; display: flex; } .c-header-links-item-ul.actived { flex-direction: column; align-items: center; justify-content: center; gap: 0; } .c-header-links-item-li.actived { width: 100%; padding-top: 19px; padding-bottom: 19px; text-align: center; border-bottom: 1px solid rgba(51, 51, 51, 1); } .c-header-links-item.actived { width: 100%; } .c-header-links-item:nth-child(2).actived { display: none; } .c-header-login-register.actived { flex-direction: column; gap: 0; justify-content: center; align-items: center; display: flex; padding: 1.4rem 0; gap: 1.6rem; } .c-header-login-register-a.actived { justify-content: center; } .c-header-login-register-item.actived { width: 100%; } .c-header-login-register-btn::after.actived { height: 50px; } .c-header-btn-mobil.actived { top: -1.3rem; right: 1.5rem; } .c-header-logo.actived { display: none; } .c-header.actived { padding-right: 0; padding-left: 0; z-index: 9; height: 100vh; background-color: rgba(14, 14, 14, 1); margin: 0 auto; padding-top: 5.2rem; } .c-header-lang-mobi.actived { display: block; padding-top: 19px; padding-bottom: 19px; } .c-header-btn-mobil-span:nth-child(1).actived { transform-origin: left top; transform: rotate(45deg) translateY(0.5px); width: 100%; background-color: rgba(75, 75, 75, 1); } .c-header-btn-mobil-span:nth-child(2).actived { opacity: 0; } .c-header-btn-mobil-span:nth-child(3).actived { transform-origin: bottom left; transform: rotate(-45deg) translateY(-0.5px); width: 100%; background-color: rgba(75, 75, 75, 1); } } @media (max-width: 767px) { .c-elipse-2 { left: 45%; } }