/* ==========================================
   QResta Rewards
   BASE STYLES
========================================== */

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

:root{

    --blue:#0867f2;
    --blue-dark:#0047c7;
    --navy:#071735;

    --white:#ffffff;
    --background:#f8fbff;

    --text:#162033;
    --muted:#667085;

    --line:#e7edf7;

    --radius-sm:12px;
    --radius:18px;
    --radius-lg:24px;
    --radius-xl:30px;

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

    --transition:.25s ease;

}

html{
    scroll-behavior:smooth;
}

body{

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

    background:var(--background);

    color:var(--text);

    line-height:1.5;

    overflow-x:hidden;

    padding-bottom:100px;

}

img{

    display:block;

    width:100%;

}

button{

    border:none;

    outline:none;

    cursor:pointer;

    font-family:inherit;

}

a{

    text-decoration:none;

    color:inherit;

}

.phoneApp{

    width:100%;

    max-width:430px;

    margin:auto;

    padding:22px 18px 0;

}

.mainColumn{

    width:100%;

}

.sideColumn{

    width:100%;

}

.sectionTitle{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin:28px 0 14px;

}

.sectionTitle h2{

    font-size:22px;

    font-weight:800;

    color:var(--navy);

}

.sectionTitle a{

    color:var(--blue);

    font-size:14px;

    font-weight:700;

}

.sliderWrap{

    position:relative;

    width:100%;

}

.cardScroll{
    display:flex;
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-behavior:smooth;
    scroll-snap-type:none;
    -webkit-overflow-scrolling:touch;
    padding-bottom:10px;
}

.cardScroll::-webkit-scrollbar{

    display:none;

}

.rewardCard,
.restaurantCard{

    scroll-snap-align:start;

    flex-shrink:0;

}

.slideBtn{

    position:absolute;

    top:42%;

    transform:translateY(-50%);

    width:40px;

    height:40px;

    border-radius:50%;

    background:var(--blue);

    color:#fff;

    font-size:28px;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:var(--shadow);

    transition:var(--transition);

    z-index:20;

}

.slideBtn:hover{

    background:var(--blue-dark);

}

.slideBtn.left{

    left:-8px;

}

.slideBtn.right{

    right:-8px;

}

@media (max-width:640px){

    .slideBtn{

        display:none;

    }

}