body{

background:#0c0c0c;

font-family: 'Inter', sans-serif;

color:white;

margin:0;

}

/* HEADER */

.header{

background:#000;

padding:18px 60px;

border-bottom:1px solid #111;

}

.logo img{

height:40px;

}

/* MAIN CONTAINER */

.container{

max-width:1150px;

margin:auto;

padding:60px 20px;

}

/* STEP CARD */

.step-card{

background:#000;

border:3px solid #ff2bbf;

border-radius:32px;

padding:60px;

margin-bottom:50px;

box-shadow:0 0 25px rgba(255,43,191,0.5);

}

/* TITLE */

.step-card h1{

font-size:42px;

font-weight:800;

line-height:1.2;

margin-bottom:25px;

}

/* TEXT */

.step-card p{

color:#cfcfcf;

font-size:18px;

line-height:1.7;

}

/* ACTION TITLE */

.step-card h3{

margin-top:30px;

font-size:24px;

font-weight:700;

}

/* LISTS */

.step-card ul,
.step-card ol{

margin-top:20px;

padding-left:25px;

font-size:18px;

line-height:1.8;

color:#d8d8d8;

}

/* NOTE BOX */

.note{

margin-top:35px;

background:#111;

border:1px solid #2a2a2a;

padding:25px;

border-radius:16px;

font-size:17px;

color:#ffffff;

box-shadow:0 0 20px rgba(255,43,191,0.3);

}

/* WHY TEXT */

.why{

margin-top:25px;

color:#bbb;

}

/* FOOTER */

footer{

text-align:center;

padding:40px;

color:#888;

border-top:1px solid #111;

}
/* ============================= */
/* RESPONSIVE DESIGN (DO NOT CHANGE EXISTING STYLE) */
/* ============================= */

/* Tablets */

@media (max-width: 1024px){

.header{
padding:18px 30px;
}

.container{
padding:40px 20px;
}

.step-card{
padding:40px;
}

.step-card h1{
font-size:34px;
}

.step-card p,
.step-card ul,
.step-card ol{
font-size:17px;
}

}


/* Mobile */

@media (max-width: 768px){

.header{
padding:16px 20px;
}

.logo img{
height:32px;
}

.container{
padding:30px 16px;
}

.step-card{
padding:28px;
border-radius:24px;
margin-bottom:35px;
}

.step-card h1{
font-size:26px;
line-height:1.3;
}

.step-card h3{
font-size:20px;
}

.step-card p,
.step-card ul,
.step-card ol{
font-size:16px;
line-height:1.6;
}

.note{
font-size:15px;
padding:18px;
}

}

/* Small phones */

@media (max-width: 480px){

.step-card{
padding:22px;
}

.step-card h1{
font-size:22px;
}

.step-card h3{
font-size:18px;
}

.step-card p,
.step-card ul,
.step-card ol{
font-size:15px;
}

footer{
font-size:14px;
padding:30px;
}

}