*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Poppins, sans-serif;
}
body{
    overflow-x: hidden;
    background-image: repeating-linear-gradient(99deg, rgb(255,255,255) 0px, rgb(255,255,255) 13px,transparent 13px, transparent 16px),repeating-linear-gradient(318deg, rgb(255,255,255) 0px, rgb(255,255,255) 13px,transparent 13px, transparent 16px),repeating-linear-gradient(219deg, rgb(255,255,255) 0px, rgb(255,255,255) 13px,transparent 13px, transparent 16px),repeating-linear-gradient(11deg, rgb(255,255,255) 0px, rgb(255,255,255) 13px,transparent 13px, transparent 16px),linear-gradient(90deg, rgb(97, 239, 161),rgb(157, 25, 177));
    /* GRADIENT BY https://www.gradientmagic.com/ */
}
.s1{
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.s1 h1, .s1 h2, .s1 h3{
    text-align: center;
}
.s1 h1{
    font-size: 4rem;
    animation: slideY 0.75s ease-in-out 1 forwards;
    color: #b9b8b8;
    position: relative;
}
.s1 h1::after{
    position: absolute;
    right: -45px;
    bottom: -15px;
    content: "";
    background: url("./assets/s1.png") no-repeat center/contain;
    width: 75px;
    height: 75px;
    object-fit: contain;
}
.s1 h2{
    font-size: 3rem;
    animation: slideY 1s ease-in-out 1 forwards;
}
.s1 h3{
    font-size: 2.5rem;
    animation: slideY 1.25s ease-in-out 1 forwards;
}
.s1 h2 b, .s1 h3 b{
    color: #f6886a;
}
.steps{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.step{
    width: 18vw;
    min-height: 250px;
    min-width: 250px;
    background: lightsteelblue;
    padding: 40px;
    margin: 20px;
    display: grid;
    place-items: center;
    text-align: center;
    border-radius: 80px;
    color: black;
    font-size: 1.2rem;
    animation: slideY 1.3s ease-in-out 1 forwards;
}
.step a{
    color: white;
    padding: 10px 15px;
    color: black;
    border-radius: 30px;
    display: block;
    border: 1px solid black;
}
.step a:hover, .step a:focus{
    background: white;
}
.step:nth-child(1){
    border-radius: 40px 80px 40px 80px;
    background: lightblue;
    background: linear-gradient(125deg, #fa5072, #fdc56a);
    backdrop-filter: blur(1px);
}
.step:nth-child(3){
    border-radius: 90px 90px 20px 20px;
    background: linear-gradient(35deg, #fa5073, #fdc56a);
}
.step{
    background: linear-gradient(to top, #fa5073, #fdc56a);
}
.roadmap{
    display: flex;
    flex-direction: column;
    width: 50%;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 10px auto;
}
.roadmap h2{
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
    font-size: 3rem;
}
.roadmap p{
    min-width: 250px;
}
.pf{
    max-width: 50%;
    min-width: 250px;
    display: grid;
    place-items: center;
    margin: 10px;
    position: relative;
    z-index: 2;
    padding: 25px;
    text-align: center;
    border-radius: 40px;
    font-weight: 500;
    border: 2px solid black;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(1px);
}
.pf::before{
    content: attr(data-num);
    background: white;
    border: 3px solid black;
    border-radius: 50%;
    width: 0.5vw;
    height: 0.5vw;
    min-width: 45px;
    height: 45px;
    position: absolute;
    top: -9%;
    display: grid;
    place-items: center;
    text-align: center;
    font-size: 2rem;
}
.pf:nth-child(2n-1)::before{
    right: -9%;
}
.pf:nth-child(2n)::before{
    right: 93%;
}
.pf:nth-child(2n){
    border-radius: 30px 50px 10px 70px;
}
.pf span{
    text-align: start;
}
.details{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 80vw;
    min-width: 280px;
    margin: 20px auto;
}
.details h1{
    width: 100%;
    text-align: center;
    font-size: 3rem;
}
.details p{
    text-align: center;
    margin: 10px;
    padding: 15px 20px;
    border-radius: 40px;
    word-wrap: break-word;
    word-break: break-all;
}
.details p:nth-child(2n-1){
    border-radius: 20px 40px 20px 40px;
    background: #fcc773;
}
.details p:nth-child(2n){
    background: #fa7670;
    border-radius: 20px 30px 30px 30px;
}
.social{
    width: 10vw;
    min-width: 200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin: 4px auto;
}
.social a{
    margin: 5px;
    text-decoration: none;
    transition: transform 0.75s ease-in-out;
}
.social a img{
    height: 60px;
    width: 60px;
}
.social a:hover, .social a:active{
    transform: rotate(360deg);
}
footer{
    width: 100%;
    padding: 10px;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 300;
}
@keyframes slideY {
    0%{
        transform: translateY(15%);
        opacity: 0;
    }
    100%{
        transform: translateY(0);
        opacity: 1;
    }
}