*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

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

background:
linear-gradient(
135deg,
#000814,
#001d3d,
#003566
);



overflow-x:hidden;

}

.certificate-page{

width:100%;
min-height:100vh;

padding:70px 20px;

display:flex;
align-items:center;
justify-content:center;

}

.certificate-wrapper{

width:100%;
max-width:1400px;

margin:auto;

}

.certificate-box{

display:grid;

grid-template-columns:
380px 1fr;

gap:50px;

align-items:center;

padding:45px;

border-radius:35px;

background:
rgba(255,255,255,0.05);

border:
1px solid rgba(255,255,255,0.08);

backdrop-filter:blur(12px);

-webkit-backdrop-filter:blur(12px);

}

.certificate-image img{

width:100%;

display:block;

border-radius:25px;

box-shadow:
0 10px 30px rgba(0,0,0,0.30);

}

.certificate-form h1{

font-size:58px;

color:#fff;

margin-bottom:20px;

line-height:1.2;

}

.certificate-form h1 span{

color:#ff9d00;

}

.certificate-form p{

font-size:18px;

color:#d1d5db;

margin-bottom:30px;

line-height:1.8;

}

.certificate-input{

margin-bottom:25px;

}

.certificate-input input{

width:100%;

height:70px;

padding:0 20px;

border:none;

outline:none;

border-radius:18px;

font-size:16px;

background:#ffffff;

color:#111827;

}

.certificate-input input::placeholder{

color:#6b7280;

}

.certificate-btn{

width:100%;

height:70px;

border:none;

cursor:pointer;

border-radius:18px;

font-size:18px;

font-weight:600;

color:#fff;

background:
linear-gradient(
135deg,
#ff7b00,
#ffae00
);

}

.certificate-btn:hover{

opacity:0.95;

}

.certificate-error{

margin-top:25px;

padding:18px;

border-radius:18px;

background:#dc2626;

color:#fff;

font-size:15px;

}

.certificate-success{

margin-top:25px;

padding:25px;

border-radius:20px;

background:#16a34a;

color:#fff;

}

.certificate-success h3{

margin-bottom:10px;

font-size:24px;

}

.certificate-success p{

margin-bottom:8px;

color:#fff;

}

.download-btn{

display:inline-block;

margin-top:20px;

padding:15px 35px;

border-radius:50px;

background:#fff;

color:#16a34a;

text-decoration:none;

font-weight:600;

transition:0.3s;

}

.download-btn:hover{

background:#f3f4f6;

}

@media(max-width:991px){

.certificate-box{

grid-template-columns:1fr;

}

.certificate-form h1{

font-size:42px;

}

}

@media(max-width:600px){

.certificate-page{

padding:30px 15px;

}

.certificate-box{

padding:25px;

gap:25px;

}

.certificate-form h1{

font-size:32px;

}

.certificate-form p{

font-size:16px;

}

.certificate-input input{

height:60px;

}

.certificate-btn{

height:60px;

font-size:16px;

}

}