*{

margin:0;

padding:0;

box-sizing:border-box;

font-family:Arial, Helvetica, sans-serif;

}




body{

background:#f5f7fb;

color:#222;

}







/* HEADER */


header{

height:75px;

background:white;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 8%;

box-shadow:0 2px 15px #ddd;

position:sticky;

top:0;

z-index:10;

}




header h2{

color:#2563eb;

font-size:24px;

}




nav a{

margin-left:25px;

font-weight:bold;

cursor:pointer;

color:#333;

}







/* HERO */


.hero{

padding:90px 20px;

text-align:center;

background:linear-gradient(

135deg,

#2563eb,

#06b6d4

);

color:white;

}




.hero h1{

font-size:45px;

margin-bottom:15px;

}




.hero p{

font-size:20px;

}








/* TOOL CARDS */


.tool-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(180px,1fr));

gap:20px;

padding:40px 10%;

}




.tool-grid div{

background:white;

padding:25px;

border-radius:18px;

text-align:center;

font-weight:bold;

box-shadow:0 8px 25px #ddd;

transition:0.3s;

}




.tool-grid div:hover{

transform:translateY(-5px);

}









/* MAIN BOX */


section{

padding:35px 20px;

}




.box{

max-width:550px;

margin:auto;

background:white;

padding:35px;

border-radius:22px;

box-shadow:0 10px 30px #ddd;

}




.box h2{

text-align:center;

margin-bottom:25px;

}








/* FORM */


input,

select{

width:100%;

padding:14px;

margin:10px 0;

border-radius:10px;

border:1px solid #ccc;

font-size:16px;

}




label{

font-weight:bold;

}





button{

width:100%;

padding:15px;

margin-top:15px;

border:none;

border-radius:10px;

background:#2563eb;

color:white;

font-size:17px;

cursor:pointer;

transition:0.3s;

}





button:hover{

background:#1d4ed8;

}









/* DOWNLOAD */


#download,

#pdfDownload{

display:block;

margin-top:20px;

text-align:center;

font-weight:bold;

color:#2563eb;

text-decoration:none;

}




#size{

text-align:center;

font-weight:bold;

margin-top:15px;

line-height:25px;

}









/* PDF FILE ORDER */


#fileList{

list-style:none;

margin-top:20px;

}




#fileList li{

background:#f1f5f9;

padding:12px;

margin-bottom:10px;

border-radius:10px;

display:flex;

justify-content:space-between;

align-items:center;

cursor:grab;

}




#fileList button{

width:auto;

padding:5px 10px;

background:#ef4444;

font-size:14px;

margin:0;

}










/* FOOTER */


footer{

margin-top:50px;

background:#111827;

color:white;

padding:35px;

text-align:center;

line-height:30px;

}











/* MOBILE */


@media(max-width:700px){


header{

height:auto;

padding:20px;

flex-direction:column;

}



nav{

margin-top:15px;

}



nav a{

margin:8px;

display:inline-block;

}



.hero h1{

font-size:32px;

}



.hero{

padding:60px 15px;

}


}