/* ==========================================
   BUS PAGE
========================================== */

/* ---------- HERO ---------- */

.bus-hero{

    background:linear-gradient(135deg,#072554,#1565c0);

    color:#fff;

    text-align:center;

    padding:32px 24px;
}

.bus-hero h1{

    color:#fff;

    margin:16px 0;
}

.bus-hero p{

    color:rgba(255,255,255,.85);
}

/* ---------- SEARCH ---------- */

input{

    margin-bottom:12px;
}

.btn{

    width:100%;
}

/* ---------- ROUTES ---------- */

.section .card{

    transition:.3s;
}

.section .card:hover{

    transform:translateY(-4px);
}

/* ---------- TIME ---------- */

strong{

    color:#57C11D;

    font-size:20px;
}

/* ---------- MAP ---------- */

.map-placeholder{

    height:220px;

    border-radius:16px;

    background:#e9eef4;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#777;

    font-weight:bold;
}

/* ---------- BUS PASS ---------- */

.section:nth-last-child(2) .card{

    text-align:center;
}

/* ---------- SAVED ROUTES ---------- */

.grid .card{

    text-align:center;

    cursor:pointer;
}

.grid .card:hover{

    background:#f7fafc;
}

/* ---------- RESPONSIVE ---------- */

@media(min-width:768px){

.bus-hero{

    padding:60px 40px;
}

.map-placeholder{

    height:320px;
}

}

@media(min-width:1100px){

.bus-hero{

    padding:80px;
}

.map-placeholder{

    height:420px;
}

}