/* ==========================
   Google Font
========================== */

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:#f5f8fc;

    color:#2d3748;

}


/* ==========================
   Navbar
========================== */

.navbar{

    width:100%;

    height:80px;

    background:#ffffff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 8%;

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

    position:sticky;

    top:0;

    z-index:1000;

}

.logo{

    display:flex;

    align-items:center;

    gap:12px;

}

.logo img{

    width:42px;

}

.logo span{

    font-size:24px;

    font-weight:600;

    color:#1e3a8a;

}

.logo b{

    color:#2563eb;

}

.navbar ul{

    display:flex;

    gap:40px;

    list-style:none;

}

.navbar a{

    text-decoration:none;

    color:#475569;

    font-weight:500;

    transition:.3s;

}

.navbar a:hover{

    color:#2563eb;

}

.active{

    color:#2563eb !important;

}


/* ==========================
   Hero
========================== */

.hero{

    max-width:1250px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:70px 40px;

}

.hero-left{

    width:50%;

}

.hero-left h1{

    font-size:58px;

    line-height:70px;

    color:#1e293b;

    margin-bottom:20px;

}

.hero-left span{

    color:#2563eb;

}

.hero-left p{

    width:90%;

    line-height:30px;

    color:#64748b;

    font-size:17px;

}

.hero-right{

    width:45%;

    display:flex;

    justify-content:center;

}

.hero-right img{

    width:430px;

}


/* ==========================
   Main Card
========================== */

.main-card{

    max-width:1250px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:30px;

    padding:20px 40px 60px;

}


/* ==========================
   Upload Card
========================== */

.upload-card{

    background:white;

    border-radius:25px;

    padding:35px;

    box-shadow:0 10px 35px rgba(0,0,0,.06);

}

.upload-card h2{

    color:#2563eb;

    margin-bottom:25px;

}

.drop-area{

    height:380px;

    border:3px dashed #cbd5e1;

    border-radius:18px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    transition:.35s;

    cursor:pointer;

}

.drop-area:hover{

    border-color:#2563eb;

    background:#f8fbff;

}

.drop-area i{

    font-size:65px;

    color:#2563eb;

    margin-bottom:20px;

}

.drop-area h3{

    margin-bottom:8px;

    font-size:24px;

}

.drop-area p{

    color:#64748b;

    margin-bottom:25px;

}

#chooseBtn{

    border:none;

    background:#2563eb;

    color:white;

    padding:14px 34px;

    border-radius:12px;

    cursor:pointer;

    font-size:16px;

    transition:.3s;

}

#chooseBtn:hover{

    background:#1d4ed8;

}


/* ==========================
   Result Card
========================== */

.result-card{

    background:white;

    border-radius:25px;

    padding:35px;

    box-shadow:0 10px 35px rgba(0,0,0,.06);

}

.result-card h2{

    color:#2563eb;

    margin-bottom:25px;

}

.result-body{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.preview{

    width:100%;

    height:270px;

    border-radius:18px;

    background:#eef4fb;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

.preview img{

    max-width:100%;

    max-height:100%;

    object-fit:contain;

}

.information{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 20px;

    background:#f8fafc;

    border-radius:14px;

}

.item span{

    color:#64748b;

}

.item strong{

    color:#2563eb;

}


/* ==========================
   About
========================== */

.about{

    max-width:1250px;

    margin:60px auto;

    padding:45px;

    background:white;

    border-radius:25px;

    box-shadow:0 10px 35px rgba(0,0,0,.06);

}

.about h3{

    margin-bottom:15px;

    color:#1e293b;

}

.about p{

    color:#64748b;

    line-height:32px;

}


/* ==========================
   Responsive
========================== */

@media(max-width:1000px){

.hero{

flex-direction:column;

text-align:center;

gap:50px;

}

.hero-left{

width:100%;

}

.hero-left p{

width:100%;

}

.hero-right{

width:100%;

}

.hero-right img{

width:320px;

}

.main-card{

grid-template-columns:1fr;

}

}

@media(max-width:700px){

.navbar{

padding:0 20px;

}

.navbar ul{

display:none;

}

.hero{

padding:40px 20px;

}

.hero-left h1{

font-size:42px;

line-height:52px;

}

.main-card{

padding:20px;

}

.upload-card,

.result-card,

.about{

padding:25px;

}

.drop-area{

height:300px;

}

}