*{

box-sizing:border-box;

font-family:
"Poppins",
Arial,
sans-serif;

}



body{


margin:0;

min-height:100vh;

background:

linear-gradient(
135deg,
#667eea,
#764ba2
);


display:flex;

justify-content:center;

align-items:center;


}





.container{


width:90%;

max-width:900px;

text-align:center;


}





h1{


color:white;

font-size:40px;


}



.subtitle{


color:white;

font-size:20px;

}





.form-box{


background:white;

padding:25px;

border-radius:20px;

margin-top:30px;


}




label{


display:block;

text-align:left;

font-weight:bold;

margin-top:10px;


}



input,
select{


width:100%;

padding:12px;

margin-top:8px;

border-radius:10px;

border:1px solid #ccc;

font-size:16px;


}





button{


margin-top:20px;

padding:12px 25px;

border:none;

border-radius:10px;

cursor:pointer;

background:#667eea;

color:white;

font-size:16px;


}




button:hover{


background:#4b5bdc;


}







.certificate{


display:none;

background:white;

margin-top:40px;

padding:40px;

border:

10px solid gold;


border-radius:20px;


box-shadow:

0 0 30px black;


}





.certificate h2{


color:#d49b00;

font-size:35px;


}




.certificate h1{


color:#1565c0;

font-size:45px;


}



.certificate h3{


font-size:28px;

color:#333;


}




.signature{


display:flex;

justify-content:space-around;

margin-top:50px;

font-weight:bold;


}







.certificate-actions button{


margin:15px;


}




.social-share{


margin-top:25px;

display:flex;

gap:15px;

justify-content:center;

flex-wrap:wrap;


}




.social-share a{


padding:10px 15px;

background:#222;

color:white;

border-radius:8px;

text-decoration:none;


}





@media(max-width:600px){


.signature{

flex-direction:column;

gap:30px;

}


.certificate h1{

font-size:30px;

}



}