* {
    margin: 0px;
    padding: 0px;
    text-decoration: none;
}
body {
    
background: #0F0F0F;
}
nav {
    
box-sizing: border-box;

position: fixed;
width: 100%;
height: 77px;
left: 0px;
top: 0px;
z-index: 99;
background: rgba(255, 255, 255, 0.01);
border-bottom: 1px solid rgba(255, 255, 255, 0.26);
backdrop-filter: blur(26.5px);
}
nav h1 {
    
position: absolute;
width: 482px;
height: 60px;
left: 15px;
top: 5px;

font-family: 'Poppins';
font-style: normal;
font-weight: 800;
font-size: 40px;
line-height: 60px;
/* identical to box height */

display: flex;
align-items: center;

color: #FFFFFF;
}
.waves {
    
position: absolute;
width: 100%;
height: 137px;
left: 0px;
top: 0px;

background: rgba(0, 25, 255, 0.25);
}
.svg-waves {

    position: absolute;
    width: 100%;
    height: auto;
    left: 0px;
    opacity: 25%;
    top: 137px;
    transform: rotate(180deg);
}
.title {
    
position: absolute;
width: 392px;
height: 96px;
left: 106px;
top: 227px;

font-family: 'Poppins';
font-style: normal;
font-weight: 800;
font-size: 64px;
line-height: 96px;
/* identical to box height */

display: flex;
align-items: center;

color: #FFFFFF;

}
.subtitle {
    

    position: absolute;
    width: 453px;
    height: 96px;
    left: 200px;
    top: 336px;
    
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    font-size: 32px;
    line-height: 48px;
    display: flex;
    align-items: center;
    
    color: #FFFFFF;
    
}
.paragraph {
    
position: absolute;
width: 453px;
height: 46px;
left: 268px;
top: 449px;

font-family: 'Poppins';
font-style: normal;
font-weight: 800;
font-size: 15px;
line-height: 22px;
display: flex;
align-items: center;

color: rgba(255, 255, 255, 0.44);

}
.card {
    
box-sizing: border-box;

position: relative;
width: 297px;
height: 459px;
display: inline-block;
top: 609px;
margin-top: 10px;
margin-left: 60.5px;
margin-right: 60.5px;
background: rgba(255, 255, 255, 0.01);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 14px;
}
.card img {
    opacity: 80%;
position: relative;
width: 210px;
height: 210px;
display: inline-block;
top: 21px;

}
.card h1 {
    
position: absolute;
width: 100%;
height: 48px;
left: 0px;
top: 246px;

font-family: 'Poppins';
font-style: normal;
font-weight: 800;
font-size: 32px;
line-height: 48px;
/* identical to box height */
align-items: center;
text-align: center;

color: #FFFFFF;

}
.card p {
    
position: absolute;
width: 100%;
height: 113px;
left: 0px;
top: 359px;

font-family: 'Poppins';
font-style: normal;
font-weight: 800;
font-size: 15px;
line-height: 22px;
align-items: center;
text-align: center;

color: rgba(255, 255, 255, 0.54);

}
.card:hover {
    -webkit-box-shadow: -1px 0px 33px 10px #001aff6c;
    box-shadow: -1px 0px 33px 10px #001aff6c;
    transform: scale(1.01);
}
.bar {
    
position: relative;
width: 90%;
height: 1px;
display: inline-block;
top: 639px;

background: radial-gradient(50% 50% at 50% 50%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
transform: matrix(1, 0, 0, -1, 0, 0);
}
.offer {
    
position: relative;
width: 157px;
height: 63px;
top: 839px;

font-family: 'Poppins';
font-style: normal;
font-weight: 800;
font-size: 24px;
line-height: 36px;
display: flex;
align-items: center;
text-align: center;

color: #FFFFFF;

}
.offer-zone {
    width: 100%;
    height: auto;
    margin-top: 1039px;
}
.offer-zone .offer-card {
    
box-sizing: border-box;

position: relative;
width: 287px;
height: 500px;
margin: 61px 61px 61px 61px;
display: inline-block;
top: 0px;
overflow: hidden;
background: rgba(255, 255, 255, 0.01);
border: 1px solid #FFFFFF;
border-radius: 13px;
}
.offer-card .background {

    position: absolute;
    width: 100%;
    height: 160.83px;
    left: 0px;
    top: -20px;
}
.offer-card .blur {
    
position: absolute;
width: 100%;
height: 160.83px;
left: 0px;
top: 0px;



backdrop-filter: blur(5.5px);
}
.offer-card .linear {
    
position: absolute;
width: 100%;
height: 175px;
left: 0px;
top: 0px;

background: linear-gradient(0deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.01)), linear-gradient(179.69deg, #0F0F0F 26.69%, rgba(15, 15, 15, 0) 99.73%);
backdrop-filter: blur(11.5px);
/* Note: backdrop-filter has minimal browser support */

transform: matrix(1, 0, 0, -1, 0, 0);
}
.offer-card .logo {
    position: absolute;
width: 170px;
left: 59px;
display: flex;
top: 3px;

}
.offer-card:hover {
    -webkit-box-shadow: -1px 0px 33px 10px #001aff6c;
    box-shadow: -1px 0px 33px 10px #001aff6c;

}
.offer-card h1 {
    
position: absolute;
width: 100%;
height: 25px;
left: 1px;
top: 190px;

font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 15px;
line-height: 25px;
/* identical to box height */

text-align: center;
text-decoration-line: underline;
text-transform: uppercase;

color: #FFFFFF;

}
.offer-card .enter-p {
    
position: absolute;
width: 286px;
height: 25px;
left: 0px;
top: 210px;

font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 15px;
line-height: 25px;
/* identical to box height */

text-align: center;
text-transform: uppercase;

color: rgba(255, 255, 255, 0.44);

}
.offer-card .prise {
    
position: absolute;
width: 100%;
height: 29px;
left: 0px;
top: 235px;

font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 39px;
text-align: center;
text-transform: uppercase;

/* Text with shadow */
text-shadow: 0px 0px 35px rgba(0,26,255,0.72);
color: #001AFF;
}
.offer-card .per {
    
position: absolute;
width: 100%;
height: 15px;
left: 0px;
top: 268px;

font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 10px;
line-height: 16px;
text-align: center;
text-transform: uppercase;

color: rgba(255, 255, 255, 0.15);
}
.offer-card button {
    
box-sizing: border-box;

position: relative;
width: 156px;
height: 30px;
display: inline-block;
top: 446px;
color: #FFFFFF;
text-transform: uppercase;

background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.27);
border-radius: 8px;
}
.offer-card .stat {
    
position: absolute;
width: 28px;
height: 28px;
left: 20px;
top: 298px;
}
.statp {
    
position: absolute;
width: 44px;
height: 19px;
left: 59px;
top: 302px;

font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 11px;
line-height: 18px;
text-align: center;
text-transform: uppercase;

color: #FFFFFF;

}
.stat2p {
    
position: absolute;
width: 44px;
height: 19px;
left: 59px;
top: 340px;

font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 11px;
line-height: 18px;
text-align: center;
text-transform: uppercase;

color: #FFFFFF;

}
.stat3p {
    
position: absolute;
width: 63px;
height: 19px;
left: 59px;
top: 381px;

font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 11px;
line-height: 18px;
text-align: center;
text-transform: uppercase;

color: #FFFFFF;
}
.stat4p {
    
position: absolute;
width: 75px;
height: 19px;
left: 191px;
top: 302px;

font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 11px;
line-height: 18px;
text-align: center;
text-transform: uppercase;

color: #FFFFFF;
}
.stat5p {
    
position: absolute;
width: 44px;
height: 19px;
left: 191px;
top: 340px;

font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-size: 11px;
line-height: 18px;
text-align: center;
text-transform: uppercase;

color: #FFFFFF;

}
.offer-card .stat2 {
    
position: absolute;
width: 28px;
height: 28px;
left: 20px;
top: 336px;

}
.offer-card .stat3 {
    position: absolute;
width: 28px;
height: 28px;
left: 20px;
top: 374px;

}
.offer-card .stat4 {
    position: absolute;
width: 28px;
height: 28px;
left: 155px;
top: 298px;
}
.offer-card .stat5 {
    position: absolute;
width: 28px;
height: 28px;
left: 155px;
top: 336px;
}