/* ===========================
   AI Background Remover Pro
   Style.css
=========================== */

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

body{
    font-family:'Poppins',sans-serif;
    background:#f4f7fc;
    color:#222;
}

/* Navbar */

.navbar{
    background:linear-gradient(90deg,#4f46e5,#7c3aed)!important;
    box-shadow:0 4px 15px rgba(0,0,0,.15);
}

.navbar-brand{
    font-weight:700;
    font-size:24px;
}

.nav-link{
    color:#fff!important;
    margin-left:15px;
    transition:.3s;
}

.nav-link:hover{
    opacity:.8;
}

/* Hero */

.hero{

    padding:70px 20px;

    text-align:center;

    background:linear-gradient(135deg,#4f46e5,#7c3aed);

    color:white;

}

.hero h1{

    font-size:48px;

    font-weight:700;

}

.hero p{

    margin-top:15px;

    font-size:18px;

    opacity:.9;

}

/* Upload Card */

.upload-card{

    background:white;

    padding:40px;

    border-radius:20px;

    box-shadow:0 15px 40px rgba(0,0,0,.1);

    text-align:center;

    margin-top:-40px;

}

.upload-card input{

    width:100%;

    padding:15px;

    border:2px dashed #4f46e5;

    border-radius:15px;

    cursor:pointer;

    margin-bottom:20px;

}

#uploadBtn{

    width:100%;

    border:none;

    padding:15px;

    border-radius:12px;

    background:#4f46e5;

    color:white;

    font-size:18px;

    font-weight:600;

    transition:.3s;

}

#uploadBtn:hover{

    background:#4338ca;

    transform:translateY(-2px);

}

/* Progress */

.progress{

    height:25px;

    border-radius:30px;

    overflow:hidden;

    background:#ddd;

}

.progress-bar{

    background:#22c55e;

    font-weight:600;

    transition:width .4s;

}

/* Preview */

img{

    width:100%;

    border-radius:15px;

    box-shadow:0 5px 20px rgba(0,0,0,.1);

    margin-top:10px;

}

h4{

    text-align:center;

    margin-bottom:10px;

}

/* Download */

#downloadBtn{

    padding:15px 30px;

    border-radius:12px;

    font-size:18px;

}

/* Footer */

footer{

    margin-top:60px;

}

/* Responsive */

@media(max-width:768px){

.hero h1{

font-size:32px;

}

.hero p{

font-size:16px;

}

.upload-card{

padding:20px;

margin-top:-20px;

}

}