@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;600;700;800&display=swap');

/* ==========================
   Global Reset
========================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Baloo 2',cursive;
}

/* ==========================
   Body
========================== */

body{
background:linear-gradient(160deg,#b8ffff,#55e8f5,#16c9dc);
min-height:100vh;
padding:20px 14px;
overflow-x:hidden;
position:relative;
color:#111;
}

/* ==========================
   Background Blur Circles
========================== */

.bg-circle{
position:fixed;
border-radius:50%;
filter:blur(70px);
opacity:.35;
z-index:-1;
}

.c1{
width:220px;
height:220px;
background:#ff8fd1;
top:-60px;
left:-70px;
}

.c2{
width:260px;
height:260px;
background:#fff36d;
right:-90px;
bottom:-80px;
}

/* ==========================
   Main Container
========================== */

.container{
width:100%;
max-width:480px;
margin:auto;
}

/* ==========================
   Logo
========================== */

.logo{
display:flex;
justify-content:center;
margin-bottom:20px;
}

.logo img{
width:95px;
height:95px;
object-fit:contain;
}

/* ==========================
   Typography
========================== */

h1{
font-size:40px;
font-weight:800;
text-align:center;
margin-bottom:10px;
}

h2{
font-size:30px;
font-weight:800;
text-align:center;
margin-bottom:20px;
}

p{
font-size:17px;
line-height:1.6;
color:#333;
}

/* ==========================
   Cards
========================== */

.card{
background:white;
border-radius:30px;
padding:25px;
box-shadow:0 15px 35px rgba(0,0,0,.18);
}

/* ==========================
   Forms
========================== */

.input-group{
margin-bottom:18px;
}

.input-group label{
display:block;
font-size:18px;
font-weight:700;
margin-bottom:8px;
color:#111;
}

input,
textarea,
select{

width:100%;

padding:16px;

border:none;
outline:none;

background:#f7f7f7;

border-radius:18px;

font-size:17px;

box-shadow:0 5px 12px rgba(0,0,0,.08);

}

textarea{
resize:vertical;
min-height:120px;
}

/* ==========================
   Radio Buttons
========================== */

.radio-group{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:8px;
}

.radio-group label{
display:flex;
align-items:center;
gap:8px;
padding:10px 16px;
background:#f7f7f7;
border-radius:30px;
box-shadow:0 5px 10px rgba(0,0,0,.08);
cursor:pointer;
font-size:15px;
font-weight:600;
}

/* ==========================
   Buttons
========================== */

button{

width:100%;

padding:16px;

border:none;

border-radius:18px;

background:#111;

color:white;

font-size:20px;

font-weight:700;

cursor:pointer;

transition:.25s;

}

button:hover{
transform:translateY(-2px);
}

button:active{
transform:scale(.97);
}

/* ==========================
   Links
========================== */

a{
text-decoration:none;
font-weight:700;
color:#111;
}

a:hover{
text-decoration:underline;
}

/* ==========================
   Utility Classes
========================== */

.text-center{
text-align:center;
}

.mt-10{
margin-top:10px;
}

.mt-20{
margin-top:20px;
}

.mb-20{
margin-bottom:20px;
}

.hidden{
display:none;
}

/* ==========================
   Mobile
========================== */

@media(max-width:480px){

.logo img{
width:85px;
height:85px;
}

h1{
font-size:34px;
}

h2{
font-size:26px;
}

input,
textarea,
select{
font-size:16px;
padding:14px;
}

button{
font-size:18px;
padding:15px;
}

}