:root {
    --black:#030303;
    --pink:#B94A95;
    --heading-one:60px;
    --mobile-heading-one:40px;
    --text:20px;
    --mobile-text:18px;
    --vertical-text:14px;
    --mobile-vertical-text:10px;
    --list-item:35px;
    --mobile-list-item:25px;
    --heading-two:50px;
    --mobile-heading-two:30px;
}
@font-face {
    font-family: customFont;
    src: url(../Adieu-Regular.ttf);
}
*,
*::before,
*::after {
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: 'Darker Grotesque', sans-serif;
    font-family:customFont;
}

.button-solid {
    background-color:white;
    border:2px solid white;
    color:black;
    display:flex;
    align-items: center;
    gap:1rem;
    padding:0.5rem 1rem;
    font-weight:700;
}
.button-hollow {
    background-color:transparent;
    border:none;
    color:white;
    display:flex;
    align-items: center;
    gap:1rem;
    padding:0.5rem 1rem;
    font-weight:700;
}
button span {
    display:flex;
    align-items: center;
    justify-content: center;
}
button {
    cursor:pointer;
    transition:500ms;
}
button:hover img {
    scale:1.25;
    transition:500ms;
}

ul {
    list-style:none;
}
a {
    text-decoration:none;
    color:white;
}
p,
button,
a,
li {
    font-family: 'Darker Grotesque', sans-serif;

}

header,
main,
section,
footer {
    width:100%;
    display:flex;
    align-items: center;
    justify-content: center;
}

.wrapper {
    width:100%;
    max-width:1440px;
    padding: 6rem 4rem;
}
body {
    background-color:var(--black);
    color:white;
}
h2 {
    line-height:1.2 !important;
}
h1 {
    line-height:1.1 !important;
}
span {
    color:var(--pink);
}
/****** Dropdown ******/

.dropdown {
    position:relative !important;
    display:none;
    z-index:10;
}
.dropdown-menu {
    position:absolute;
    right:0;
    top:calc(100% + 0.5rem);
    padding:1.5rem;
    background-color:#262626;
    box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.1);
    display:grid;
    grid-template-columns:1fr 1fr;
    width:max-content;
    opacity:0;
    transform:translateY(-1rem);
    transition:opacity 0.5s, transform 0.5s;
    pointer-events:none;
    gap:2rem;
    border-radius:0.5rem;
   
}





.dropdown-heading > a {
    font-weight:700 !important;
}
.dropdown-links {
    display:flex;
    flex-direction: column;
    gap:0.5rem;
}
.dropdown-links a {
    font-weight:300 !important;
}
.div {
    display:flex;
    flex-direction: column;
    gap:0.5rem;
}
.menu {
    width:30px;
    display:none;
    cursor:pointer;
}
.dropdown.active > .link + .dropdown-menu {
    opacity:1;
    transform:translateY(0);
    pointer-events:all;
    transition:opacity 0.5s, transform 0.5s;

}
.menu + .dropdown-menu {
    padding-block:2rem;
    display:none;
}
.dropdown-heading > p {
    font-weight:700 !important;
}
.dropdown > a {
    font-weight:300 !important;
}
@media (max-width:1000px) {
    nav ul {
        display:none;
    }
    .dropdown {
        display:block;
    }
    .menu + .dropdown-menu {
        padding-block:2rem;
        display:grid;
    }
    .menu {
        display:block;
    }
    nav {
        display:flex;
        justify-content: flex-end;
    }
}
@media (max-width:500px) {
    .header-wrapper {
        padding-inline:1rem;
    }
    .dropdown-menu {
        grid-template-columns:1fr;
    }
}

/* Header */

header {
    background-color:#0E0A0B50;
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index:10;
    position:relative;

}

.header-wrapper {
    width:100%;
    max-width:1440px;
    padding:2rem 4rem;
    display:flex;
    align-items: center;
    justify-content: space-between;
}
.menu {
    display:none;
    width:50px;
}
.header-logo img {
    width:250px;
}
.header-logo {
    display:flex;
    align-items: center;
    justify-content: flex-start;
}

nav {
    display:flex;
    align-items: center;
    justify-content: flex-end;
}
nav ul {
    display:flex;
    align-items: center;
    gap:2rem;
}
nav ul li {
    font-size:var(--text);
    font-weight:700;
}
button img {
    width:10px;
}
button {
    font-size:22px;
}
h1 {
    font-size:var(--heading-one);
    line-height:0.9;
    font-weight:500;
}
p {
    font-size:var(--text);
}
@media (max-width:1000px) {
    .menu {
        display:block;
    }
    nav {
        display:none;
    }
}
@media (max-width:700px) {
    .header-wrapper {
        padding-inline:2rem;
    }
}
@media (max-width:500px) {
    .header-wrapper {
        padding-inline:1rem;
    }
    .header-logo img {
        width:200px;
    }
    nav img {
        width:40px;
    }
}

/* main */

main {
    background-image: linear-gradient(to left, #030303, #03030300), linear-gradient(to top, #030303, #03030300 10%), url(../visual-png/HOWITWORKS-BG.png);
    background-size:cover;
    background-repeat: no-repeat;
    background-position:center;
}
main .wrapper {
    padding-block:8rem;
    padding-bottom:12rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:1rem;
}
main h1 {
    font-size:var(--heading-one);
    text-align:center;
    max-width:20ch;
}
main p {
    max-width:80ch;
    text-align:center;
    font-weight:400;
}
@media (max-width:700px) {
    main .wrapper {
        padding-inline:2rem;
    }
    main h1 {
        font-size:var(--mobile-heading-one);
    }
}
@media (max-width:500px) {
    main .wrapper {
        padding-inline:1rem;
    }
    main h1 {
        font-size:var(--mobile-heading-one);
    }
}

/** How it works */

.how-it-works-section {
    background-color:var(--black);
    color:white;
    width:100%;
}
.how-it-works-section .wrapper {
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    gap:8rem;
    width:100%;
}

.how-it-works-titles h2 {
    font-size:var(--heading-two);
}
.how-it-works-titles {
    border-block:2px solid white;
    width:100%;
    padding-block:1rem;
}

.how-it-works-grid-item {
    display:flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap:1rem;
    width:100%;
}
.number {
    display:flex;
    align-items: flex-end;
    justify-content: flex-end;
}
.number p {
    font-size:300px;
    font-weight:900;
    line-height:0.75;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: white;
    color:white;
}
.right-top {
    display:flex;
    align-items: center;
    justify-content: flex-start;
    width:100%;
    gap:4rem;
}
.right {
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    gap:0.5rem;
}
.right strong {
    font-size:var(--text);
    font-family: 'Darker Grotesque', sans-serif;
}
.how-it-works-grid {
    display:grid;
    grid-template-columns: 1fr 1fr;
    width:100%;
    gap:8rem;
}
.right-bottom p {
    font-size:var(--text) !important;
}
.pink {
    padding:0;
    margin-top:2rem;
    color:var(--pink);
    background-color:var(--black);
    border:2px solid var(--black)
}
.pink img {
    width:35px;
}

@media (max-width:1246px) {
    .how-it-works-grid {
        grid-template-columns: 1fr;
    }
    .blank {
        display:none;
    }
}
@media (max-width:700px) {
    .how-it-works-section .wrapper {
        padding-inline:2rem;
    }
    
}

@media (max-width:618px) {
    .how-it-works-grid img {
        width:60px;
    }
    .blank {
        display:none;
    }
    .right-top {
        gap:2rem;
    }
    .number p {
        font-size:200px ;
    }
}
@media (max-width:500px) {
    .how-it-works-section .wrapper {
        padding-inline:1rem;
    }
    .how-it-works-grid-item {
        flex-direction: column;
        align-items: flex-start;
        gap:4rem;
    }
    .how-it-works-section h2 {
        font-size:var(--mobile-heading-two);
    }
    .right {
        gap:2rem;
    }
    .right-bottom p {
        font-size:var(--mobile-text) !important;
    }
    
}



/* CTA */

.cta-section .wrapper {
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-block:18rem;
}
.cta-section h2 {
    line-height:1;
    max-width:20ch;
    font-size:var(--heading-two);
    text-align:center;
}

@media (max-width:700px) {
    .cta-section .wrapper {
        padding-inline:2rem;
    }
    .cta-section h2 {
        font-size:var(--mobile-heading-two);
    }
}
@media (max-width:500px) {
    .cta-section .wrapper {
        padding-inline:1rem;
    }
   
}
/* Animations */

h1 span {
    transform:translateY(4rem);
    display:block;
    position:static;
    animation: pink-slide 1200ms forwards ease;
    opacity:0;
}
.notspan {
    color:white;
    animation:white-slide 1000ms forwards ease;
    transform:translateY(0rem) translateX(-4rem);
    opacity:0;

}

@keyframes pink-slide {
    100% {
        transform:translateY(0rem);
        opacity:1;
        
    }
}
@keyframes white-slide {
    100% {
        transform:translateX(0rem);
        opacity:1;
        
    }
}