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

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

html{
    scroll-behavior:smooth;
}

body{
    background:var(--background);
    color:var(--text);

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

    line-height:1.8;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;
}

/* ===================================
   CONTAINER
=================================== */

.container{
    width:90%;
    max-width:var(--container);
    margin:auto;
}

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

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:14px 28px;

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

    color:#fff;

    border:none;

    border-radius:var(--radius-md);

    cursor:pointer;

    text-decoration:none;

    transition:var(--transition);

    box-shadow:var(--shadow-sm);
}

.btn:hover{

    transform:translateY(-4px) scale(1.03);

    box-shadow:0 20px 40px rgba(37,99,235,.35);

}

/* ===================================
   CARD
=================================== */

.card{

    background:var(--surface);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-md);

    padding:30px;

}

/* ===================================
   SECTION
=================================== */

.section{

    padding:80px 0;

}