@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{

    background:#F5F7FB;

    color:#333;

}

/* ================= HEADER ================= */

header{

    width:100%;

    height:80px;

    background:white;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 70px;

    box-shadow:0 2px 10px rgba(0,0,0,.08);

}

.logo{

    display:flex;

    align-items:center;

    gap:12px;

}

.logo img{

    width:48px;

    height:48px;

    object-fit:contain;

}

.logo h1{

    color:#2563EB;

    font-size:32px;

    letter-spacing:1px;

}

nav{

    display:flex;

    gap:35px;

}

nav a{

    text-decoration:none;

    color:#444;

    font-weight:600;

    transition:.25s;

}

nav a:hover{

    color:#2563EB;

}

.buttons{

    display:flex;

    gap:15px;

}

.login-btn{

    padding:10px 22px;

    border:2px solid #2563EB;

    color:#2563EB;

    border-radius:8px;

    text-decoration:none;

    font-weight:600;

    transition:.25s;

}

.login-btn:hover{

    background:#2563EB;

    color:white;

}

.signup-btn{

    padding:10px 22px;

    background:#2563EB;

    color:white;

    border-radius:8px;

    text-decoration:none;

    font-weight:600;

    transition:.25s;

}

.signup-btn:hover{

    background:#1D4ED8;

}

/* ================= HERO ================= */

.hero{

    width:90%;

    max-width:1400px;

    margin:70px auto;

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:60px;

    align-items:center;

}

.hero-left h1{

    font-size:65px;

    color:#2563EB;

    line-height:1.15;

    margin-bottom:25px;

}

.hero-left p{

    font-size:19px;

    color:#555;

    line-height:1.8;

    margin-bottom:35px;

}

.hero-buttons{

    display:flex;

    gap:20px;

}

.primary-btn{

    text-decoration:none;

    background:#2563EB;

    color:white;

    padding:15px 32px;

    border-radius:10px;

    font-weight:600;

    transition:.25s;

}

.primary-btn:hover{

    transform:translateY(-3px);

}

.secondary-btn{

    text-decoration:none;

    border:2px solid #2563EB;

    color:#2563EB;

    padding:15px 32px;

    border-radius:10px;

    font-weight:600;

    transition:.25s;

}

.secondary-btn:hover{

    background:#2563EB;

    color:white;

}

.hero-right{

    display:flex;

    justify-content:center;

}

.hero-right img{

    width:320px;

    height:320px;

    object-fit:contain;

    filter:drop-shadow(0 12px 25px rgba(0,0,0,.18));

}

/* ================= FEATURES ================= */

.features{

    width:90%;

    max-width:1400px;

    margin:90px auto;

    text-align:center;

}

.features h2{

    font-size:40px;

    color:#2563EB;

    margin-bottom:50px;

}

.cards{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}

.card{

    background:white;

    padding:35px;

    border-radius:18px;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

    transition:.25s;

}

.card:hover{

    transform:translateY(-8px);

}

.card h3{

    margin-bottom:18px;

    color:#2563EB;

}

.card p{

    color:#666;

    line-height:1.7;

}

/* ================= ABOUT ================= */

.about{

    width:80%;

    margin:100px auto;

    text-align:center;

}

.about h2{

    color:#2563EB;

    font-size:38px;

    margin-bottom:25px;

}

.about p{

    font-size:19px;

    line-height:1.9;

    color:#555;

}

/* ================= CONTACT ================= */

.contact{

    width:80%;

    margin:90px auto;

    text-align:center;

}

.contact h2{

    color:#2563EB;

    font-size:38px;

    margin-bottom:25px;

}

.contact p{

    margin:12px 0;

    font-size:18px;

}

/* ================= FOOTER ================= */

footer{

    background:#2563EB;

    color:white;

    margin-top:80px;

    padding:50px 20px;

}

.footer-content{

    text-align:center;

}

.footer-content h2{

    margin-bottom:18px;

    font-size:34px;

}

.footer-content p{

    margin:10px 0;

    font-size:17px;

}