/* ==========================
   Global Page Layout
========================== */

body{
    direction:rtl;
    text-align:center;
}

/* ==========================
   Containers
========================== */

.container{
    max-width:1100px;
    margin:0 auto;
    padding:40px 20px;
}

.page-container{
    max-width:900px;
    margin:0 auto;
    padding:50px 20px;
    text-align:center;
}

/* ==========================
   Cards
========================== */

.card{
    background:#fff;
    max-width:900px;
    margin:30px auto;
    padding:35px;
    border-radius:20px;
    box-shadow:0 5px 25px rgba(0,0,0,.12);
    text-align:center;
}

.card h1,
.card h2{
    color:#1976d2;
    margin-bottom:25px;
}

.card p{
    font-size:18px;
    line-height:2;
    margin-bottom:20px;
}

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

.hero{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:40px;
    padding:60px 20px;
    text-align:center;
}

.hero .container{
    max-width:900px;
}

.hero-text{
    flex:1;
}

.hero-image{
    flex:1;
    text-align:center;
}

/* ==========================
   Download page
========================== */

.download-link{
    margin-top:25px;
}

.store-links{
    margin-top:30px;
}

.store-links a{
    display:block;
    margin:15px auto;
    color:#1976d2;
    text-decoration:none;
    font-size:18px;
}

/* ==========================
   Generic page helpers
========================== */

.page-hero{
    display:flex;
    justify-content:center;
    text-align:center;
}

.page-container .btn{
    margin:25px auto;
}

.page-container .card{
    text-align:center;
}


/* =========================
   Buttons
========================= */

.btn,
.button {

    display:inline-block;

    background:#1976d2;

    color:#fff;

    text-decoration:none;

    padding:15px 35px;

    border-radius:10px;

    transition:.25s;

    cursor:pointer;

}


.btn:hover,
.button:hover {

    background:#1259a8;

}



/* =========================
   Buttons
========================= */

.btn,
.button {

    display:inline-block;

    background:#1976d2;

    color:#fff;

    text-decoration:none;

    padding:15px 35px;

    border-radius:10px;

    transition:.25s;

    cursor:pointer;

}


.btn:hover,
.button:hover {

    background:#1259a8;

}



/* =========================
   Global Typography
========================= */

body {

    font-family:Tahoma,Arial,sans-serif;

    background:#f5f7fb;

    color:#222;

}


p {

    line-height:2;

}



/* =========================
   Reset
========================= */

* {

    margin:0;

    padding:0;

    box-sizing:border-box;

}


/* =========================
   Typography
========================= */

h1,
h2,
h3 {

    font-weight:bold;

}