:root {
--color-primary: #16678d;
--color-primary-hover: #1b7ca8;
--color-dark: #242424;
--color-gray: #ececec;
--color-heading: #707070;
--container-width: 1440px;
} * {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 8px;
color: var(--color-dark);
}
body {
line-height: 1.6;
color: #333;
font-family: "Raleway", sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Dosis", sans-serif;
line-height: 1.2;
}
.container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 15px;
}
.btn {
display: inline-block;
background-color: var(--color-primary);
color: #fff;
padding: 1rem 2rem;
font-size: 2.5rem;
border-radius: .5rem;
text-decoration: none;
width: fit-content;
transition: background-color .3s ease;
}
.btn:hover {
background-color: var(--color-primary-hover);
}
section#divider {
height: 15rem;
background: var(--color-primary);
}
@media (max-width: 1450px) {
:root {
--container-width: 90vw !important;
}
}
@media (max-width: 768px) {
a.btn {
font-size: 3rem;
}
}
@media (max-width: 480px) {
.button {
padding: 10px 20px;
}
}.header__wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 1rem 0;
}
.header__nav {
display: flex;
align-items: center;
}
ul.header__nav-list {
display: flex;
flex-direction: row;
gap: 4rem;
}
li.header__nav-item {
list-style: none;
position: relative;
}
a.header__nav-link {
display: inline-block; position: relative;
font-size: 2rem;
line-height: 1.2;
text-decoration: none;
color: var(--color-dark);
font-weight: 500;
padding: 0.5rem 0;
transition: color var(--transition-speed, .25s);
}
a.header__nav-link:hover {
color: var(--color-primary, currentColor);
} a.header__nav-link::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 100%;
height: 2px;
background-color: var(--color-primary, currentColor); transform: translateX(-50%) scaleX(0); transform-origin: center; transition: transform var(--transition-speed, .25s) ease;
pointer-events: none;
}
a.header__nav-link:hover::after,
a.header__nav-link--active::after {
transform: translateX(-50%) scaleX(1);
}
a.header__nav-link--active {
color: var(--color-primary, currentColor);
}
.mobile {
display: none;
}
button.burger {
display: none;
}
ul.header__nav-list {
margin: 0;
}
@media (max-width: 768px) {
.mobile,
button.burger {
display: block;
}
.desktop {
display: none;
}
.mobile ul.header__nav-list {
flex-direction: column;
justify-content: center;
align-items: center;
height: calc(100vh - 11vh);
background: #e9e8e8f7;
} .header__nav.mobile {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
} .header__nav.mobile.active {
max-height: 100vh; } .burger.active span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.burger.active span:nth-child(2) {
opacity: 0;
}
.burger.active span:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
.burger span {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
background-color: var(--color-dark);
border-radius: 2px;
transition: all 0.3s ease;
}
button.burger {
background: transparent;
border: none;
}
ul.header__nav-list {
padding: 0;
margin: auto;
}
}footer {
background: var(--color-primary);
background: #000;
padding: 4rem 0;
}
footer.footer.page__footer .container {
display: flex;
justify-content: space-between;
align-items: center;
}
span.footer__copyright {
font-size: 2rem;
font-weight: 500;
color: #fff;
}
img.footer__logo {
height: 6rem;
width: fit-content;
}