/* | HEADER & NAVBAR [START] */
.header {
    position: fixed;
    width: 100%;
    z-index: 10;
    backdrop-filter: blur(10px);
}

.header .section {
    padding: 20px;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
}

.header .logo {margin: 0 auto;}
.header .list {margin-left: auto;}

.menu {cursor: pointer;}
.menu:hover {color: var(--text-secondary);}

.nav {
    background-color: #1A1A1DA0;
    padding: 50px;
    backdrop-filter: blur(10px);
    height: 100dvh;
    width: max(40%, 300px);
    position: fixed;
    z-index: 20;
    top: 0;
    left: 0;
    transform: translateX(-100%);
    opacity: 0;
    transition: transform 1s, opacity 0.5s;
    display: none;
}

.nav .list {text-align: end;}

.nav .list li {
    transform: translateX(-100%);
    transition: transform 1s ease;
}

.nav.show {
    transform: translateX(0);
    opacity: 1;
}

.nav .list li.show {transform: translateX(0);}
.nav .list .link:hover {color: var(--text-secondary);}
/* | HEADER & NAVBAR [END] */

/* | STICKY [START] */
.sticky {
    position: fixed;
    z-index: 1;
    bottom: 20px;
    right: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.sticky .link {
    cursor: pointer;
    background-color: var(--text);
    color: var(--background);
    padding: 10px;
    border-radius: 50px;
}

.sticky .movable {
    z-index: -1;
    opacity: 0;

    transition:
        transform 0.4s ease-in-out,
        opacity 0.4s ease-in-out;
}

.sticky .movable:nth-child(1) {
    transform: translate(65px, 65px) rotate(360deg);
    transition-delay: 100ms;
}

.sticky .movable:nth-child(2) {
    transform: translate(0, 65px) rotate(360deg);
    transition-delay: 0ms;
}

.sticky .movable:nth-child(3) {
    transform: translate(65px, 0) rotate(360deg);
    transition-delay: 200ms;
}

.sticky.open .movable {
    transform: translate(0, 0) rotate(0);
    opacity: 1;
    z-index: 1;
}

/* | HERO [START] */
.hero {
    height: 100dvh;
    background-image: url('../assets/cover.png');
    background-size: cover;
}

.hero .section {
    align-items: start;
    justify-content: end;
}

.hero .h1 {font-size: min(5rem, 15vw);}
/* | HERO [END] */

/* | MODELS [START] */
.featured .body.grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.featured .model:hover .img {transform: scale(1.1);}

.featured .model .image-content {
    border-radius: 16px;
    overflow: hidden;
}

.featured .model .img {border-radius: 16px;}
.featured .model .text-content {padding: 20px;}
/* | MODELS [END] */

/* | FINANCE [START] */
.finance .body {
    max-width: 900px;
    width: 100%;
}

.finance .stat {flex: 1;}

.finance .numbers .input {
    border: none;
    background-color: #348E72;
    text-align: end;
}
/* | FINANCE [END] */

/* | TESTIMONIALS [START] */
.testimonials .grid {grid-template-columns: repeat(3, 1fr);}
.testimonials .review {
    padding: 16px;
    border-radius: 16px;
    min-width: 280px;
}

.testimonials .review .logo {background-color: var(--border);}

/* & RESPONSIVENESS */
@media (max-width: 1024px) {
    .finance .body {flex-direction: column;}
    .testimonials .grid {grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 568px) {
    .header .menu .text.title {display: none;}
    .nav {padding: 20px;}
    .testimonials .grid {grid-template-columns: 1fr;}
}