/* =========================
   AEGA GLOBAL STYLE
========================= */

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


html {
    scroll-behavior: smooth;
}


body {

    font-family:
    Inter,
    "Segoe UI",
    Arial,
    sans-serif;

    background:
    #050816;

    color:
    #ffffff;

    line-height: 1.6;

    overflow-x:hidden;
}


/* animated background */

body::before {

    content:"";

    position:fixed;

    width:700px;
    height:700px;

    top:-300px;
    left:-200px;

    background:
    #2563eb;

    filter:
    blur(180px);

    opacity:.25;

    z-index:-1;

}


body::after {

    content:"";

    position:fixed;

    width:600px;
    height:600px;

    right:-200px;
    bottom:-250px;

    background:
    #9333ea;

    filter:
    blur(180px);

    opacity:.25;

    z-index:-1;

}



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


header {

    width:100%;

    padding:
    30px 8%;

    display:flex;

    justify-content:space-between;

    align-items:center;

}


.logo {

    font-size:34px;

    font-weight:900;

    letter-spacing:8px;

}


nav {

    display:flex;

    gap:30px;

}


nav a {

    color:#cbd5e1;

    text-decoration:none;

    transition:.3s;

}


nav a:hover {

    color:white;

}



/* =========================
 CONTAINERS
========================= */


.container {

    width:84%;

    max-width:1300px;

    margin:auto;

}


.hero {

    min-height:
    85vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

}



.hero h1 {

    font-size:
    clamp(50px,8vw,95px);

    line-height:1;

    font-weight:900;

    background:

    linear-gradient(
    90deg,
    #fff,
    #60a5fa,
    #c084fc
    );

    -webkit-background-clip:text;

    color:transparent;

}


.hero p {

    max-width:750px;

    margin-top:30px;

    font-size:22px;

    color:#94a3b8;

}



.button {

    margin-top:40px;

    padding:

    15px 40px;

    border-radius:50px;

    background:white;

    color:#020617;

    text-decoration:none;

    font-weight:800;

    transition:.3s;

}


.button:hover {

    transform:
    translateY(-5px);

}



/* =========================
 SECTIONS
========================= */


section {

    padding:
    90px 0;

}


.title {

    text-align:center;

    font-size:45px;

    margin-bottom:50px;

}



.grid {

    display:grid;

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

    gap:30px;

}



.card {

    padding:35px;

    border-radius:25px;


    background:

    rgba(255,255,255,.06);


    border:

    1px solid
    rgba(255,255,255,.12);


    backdrop-filter:
    blur(20px);


    transition:.4s;

}



.card:hover {

    transform:
    translateY(-10px);

    background:
    rgba(255,255,255,.1);

}


.card h3 {

    font-size:25px;

    margin-bottom:15px;

}


.card p {

    color:#94a3b8;

}



/* statistics */


.stats {

    display:grid;

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

    gap:25px;

}


.stat {

    text-align:center;

    padding:35px;

}


.stat strong {

    display:block;

    font-size:45px;

    color:#60a5fa;

}



/* footer */


footer {

    padding:50px;

    text-align:center;

    color:#64748b;

}



/* mobile */


@media(max-width:800px){

header {

    flex-direction:column;

    gap:20px;

}


nav {

    flex-wrap:wrap;

    justify-content:center;

}


.stats {

    grid-template-columns:
    1fr 1fr;

}

}
/* CONTACT FORM */

form input,
form textarea {

    width:100%;

    padding:16px;

    margin-top:8px;

    background:
    rgba(255,255,255,.05);

    border:
    1px solid rgba(255,255,255,.15);

    border-radius:15px;

    color:white;

    font-size:16px;

}


form textarea {

    min-height:150px;

    resize:none;

}


form label {

    color:#cbd5e1;

    font-size:15px;

}