/* ===========================
   GOOGLE FONT
=========================== */

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

/* ===========================
   RESET
=========================== */

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

body{
    font-family:'Poppins',sans-serif;
    background:#f8fafc;
    color:#1f2937;
    line-height:1.6;
}

img{
    width:100%;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

ul{
    list-style:none;
}

section{
    padding:90px 8%;
}

/* ===========================
   VARIABLES
=========================== */

:root{

    --primary:#4f46e5;
    --secondary:#06b6d4;
    --dark:#111827;
    --light:#ffffff;
    --gray:#6b7280;

    --radius:16px;

    --shadow:
        0 12px 30px rgba(0,0,0,.08);

}

/* ===========================
   NAVBAR
=========================== */

header{

    position:fixed;

    top:0;

    width:100%;

    background:white;

    box-shadow:0 2px 15px rgba(0,0,0,.05);

    z-index:1000;

}

.navbar{

    max-width:1200px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 5%;

}

.logo{

    font-size:1.7rem;

    font-weight:700;

    color:var(--primary);

}

.nav-links{

    display:flex;

    gap:30px;

}

.nav-links a{

    transition:.3s;

    font-weight:500;

}

.nav-links a:hover{

    color:var(--primary);

}

/* ===========================
   BUTTONS
=========================== */

.btn-primary{

    background:var(--primary);

    color:white;

    padding:13px 28px;

    border-radius:50px;

    transition:.3s;

    display:inline-block;

}

.btn-primary:hover{

    transform:translateY(-3px);

    background:#3730a3;

}

.btn-secondary{

    border:2px solid var(--primary);

    color:var(--primary);

    padding:13px 28px;

    border-radius:50px;

    transition:.3s;

}

.btn-secondary:hover{

    background:var(--primary);

    color:white;

}

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

.hero{

    min-height:100vh;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

    padding-top:140px;

}

.hero h1{

    font-size:3.3rem;

    line-height:1.2;

    margin-bottom:25px;

}

.hero p{

    color:var(--gray);

    font-size:1.1rem;

    margin-bottom:35px;

}

.hero-buttons{

    display:flex;

    gap:20px;

}

/* ===========================
   STATS
=========================== */

.stats{

    display:grid;

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

    gap:25px;

}

.stat{

    background:white;

    padding:35px;

    text-align:center;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}

.stat h2{

    color:var(--primary);

    font-size:2.3rem;

}

.stat p{

    color:var(--gray);

}

/* ===========================
   HEADINGS
=========================== */

h2{

    text-align:center;

    margin-bottom:55px;

    font-size:2.3rem;

}

/* ===========================
   CARDS
=========================== */

.cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:30px;

}

.card{

    background:white;

    padding:35px;

    border-radius:18px;

    box-shadow:var(--shadow);

    transition:.3s;

}

.card:hover{

    transform:translateY(-8px);

}

.card i{

    font-size:2.2rem;

    color:var(--primary);

    margin-bottom:20px;

}

.card h3{

    margin-bottom:15px;

}

.card p{

    color:var(--gray);

}

/* ===========================
   WHY
=========================== */

.why ul{

    max-width:700px;

    margin:auto;

}

.why li{

    background:white;

    margin:18px 0;

    padding:18px 25px;

    border-radius:12px;

    box-shadow:var(--shadow);

}

/* ===========================
   CTA
=========================== */

.cta{

    text-align:center;

    background:linear-gradient(135deg,
        var(--primary),
        var(--secondary));

    color:white;

    border-radius:25px;

    margin:70px 8%;

}

.cta h2{

    margin-bottom:20px;

}

.cta p{

    margin-bottom:30px;

}

.cta .btn-primary{

    background:white;

    color:var(--primary);

}

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

footer{

    text-align:center;

    padding:35px;

    color:var(--gray);

}

/* ===========================
   ANIMATIONS
=========================== */

.card,
.stat,
.hero-content,
.hero-image{

    opacity:0;

    transform:translateY(40px);

    transition:all .8s ease;

}

.show{

    opacity:1;

    transform:translateY(0);

}

/* ===========================
   MOBILE MENU BUTTON
=========================== */

.menu-btn{

    display:none;

    border:none;

    background:none;

    font-size:1.7rem;

    cursor:pointer;

}

/* ===========================
   PREMIUM HOVER EFFECTS
=========================== */

/* Navbar Links */

.nav-links a{
    position:relative;
    transition:.3s ease;
}

.nav-links a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0%;
    height:2px;
    background:var(--primary);
    transition:.3s;
}

.nav-links a:hover::after{
    width:100%;
}

/* Cards */

.card{
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.card:hover{

    transform:
        translateY(-10px);

    box-shadow:
        0 20px 40px rgba(79,70,229,.18);

}

/* Statistics */

.stat{

    transition:
        transform .3s,
        box-shadow .3s;

}

.stat:hover{

    transform:scale(1.05);

    box-shadow:
        0 15px 35px rgba(0,0,0,.12);

}

/* Hero Image */

.hero-image img{

    transition:
        transform .5s ease;

    border-radius:20px;

}

.hero-image img:hover{

    transform:
        scale(1.04)
        rotate(-1deg);

}

/* Buttons */

.btn-primary,
.btn-secondary{

    transition:
        all .3s ease;

}

.btn-primary:hover{

    transform:
        translateY(-4px);

}

.btn-secondary:hover{

    transform:
        translateY(-4px);

}

/* Logo */

.logo{

    transition:.3s;

}

.logo:hover{

    transform:scale(1.08);

}

/* Footer Links */

footer a{

    transition:.3s;

}

footer a:hover{

    color:var(--primary);

}

/* ===========================
   THEME BUTTON
=========================== */

.theme-toggle{

    width:45px;

    height:45px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    background:#f1f5f9;

    font-size:1.2rem;

    transition:.3s;

    margin-right:15px;

}

.theme-toggle:hover{

    transform:rotate(20deg);

    background:var(--primary);

    color:white;

}

/* ===========================
   DARK MODE
=========================== */

body.dark{

    background:#111827;

    color:#f8fafc;

}

body.dark header{

    background:#1f2937;

}

body.dark .card,

body.dark .stat,

body.dark .why li{

    background:#1e293b;

    color:white;

}

body.dark .card p,

body.dark .stat p,

body.dark .hero p,

body.dark footer{

    color:#d1d5db;

}

body.dark .navbar a{

    color:white;

}

body.dark .theme-toggle{

    background:#334155;

    color:#facc15;

}

@media(max-width:768px){

.footer-container{

grid-template-columns:1fr;

text-align:center;

}

.footer-links,

.footer-social{

align-items:center;

}

}