/* :root {

    --swiper-theme-color: #f75a04!important;

}  */



body {

    height: 100vh;

    overflow: hidden;

    font-family: 'Noto Sans';

}



a:hover {

    text-decoration: none;

    color: white;

}



.header_bg {

    position: absolute;

    /* width: 95rem; */

    width: 202vh;

    left: 0;

    top: 0;

}



.navbar-brand {

    z-index: 2;

    width: 30%;

    margin: 0;

    max-width: 9rem;

}



.icon-container > a > img {

    width: 2.5rem;

}



.navbar {

    height: 16.9vh;

    padding: 0 1rem 0 3.5rem;

    gap: 10rem;

    justify-content: space-between;

    background-color: #727272;

    position: absolute;

    width: 100%;

    z-index: 3;

    /* overflow: hidden; */

    background-image: url("../images/header_bg.png");

    background-size: cover;

}



.navbar-nav, .navbar-toggler {

    z-index: 2;

}



.navbar-nav {

    height: auto;

    align-items: center;

    /* height: 100%; */

    gap: 3rem;

}



.navbar-nav li {

    display: flex;

    align-items: center;

    height: 100%;

}



img {

    width: 100%;

}



.contact-us {

    background-color:#f75a04;

    padding-left: 3rem!important;

    color: white;

}



.row {

    margin-right: 0;

    margin-left: 0;

}



.footer-row {

    height: 19vh;



}



.news-promos, .contact-us {

    padding: 1rem;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    /* max-height: 19vh; */

}



.news-promos {

    background-color:white;

    align-items: center;

}



.news-promos > div > h5{

    color:#727272;

    font-size: 0.8rem;

}



.news-promos > div > div{

    color: #f75a04;

    font-weight: bold;

}



.footer {

    width: 100%;

    background-color: #727272;

    bottom: 0;

    color: white;

    /* height: 1.5rem; */

}



.footer > .container {

    height: 100%;

    display: flex;

    align-items: center;

}



.container-bottom {

    position: absolute;

    width: 100%;

    bottom: 0;

    z-index: 2;

    padding: 0;

}



.bg-container {

    background-size: cover;

    width: 100%;

    height: 110vh;

    background-position: center;

    background-repeat: no-repeat;

}



.login-container {

    width: 100%;

    height: 64%;

    display: flex;

    position: absolute;

    top: 17%;

    align-items: center;

    z-index: 2;

    pointer-events: none;

    flex-direction: row;

}



.login-form {

    background-image: linear-gradient(orange, #F75A04);

    border-radius: 20px;

    padding: 1rem 1rem;

    margin-left: 10rem;

    max-width: 340px;

}



.form-group {

    align-items: center;

    display: flex;

    justify-content: flex-end;

}



.form-group {

    margin-bottom: 0.8rem;

}



.form-group > label {

    padding: 0;

    color: white;

}



.login-form > .row:first-child{

    margin-bottom: 0.9rem;

}



.mobile-label {

    font-size: 0.89rem;

}



h4 {

    color: white;

    margin-bottom: 2.25rem;

}



.login-link {

    flex-direction: column;

    margin-top: 2rem;

}



.login-link > a {

    padding: 0;

    color: white;

    border-bottom: 1px solid white;

    font-size: 0.8rem;

    width: fit-content;

}



.login-form {

    pointer-events: all;

}



.btn {

    color: #F86204;

    float: right;

    /* margin-right: 1rem; */

    padding: 0.2rem 1rem;

}



.row > .btn:first-child {

    margin-right: 1rem;

}



.swiper-container {

    width: 100%;

    height: 100%;

  }



  .bg-slide {

    text-align: center;

    font-size: 18px;

    background: #fff;

    height: 110vh!important;



    /* Center slide text vertically */

    display: -webkit-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    -webkit-justify-content: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    -webkit-align-items: center;

    align-items: center;

  }



  /* .swiper-slide img {

    display: block;

    width: 100%;

    height: 110vh;

    object-fit: cover;

  } */



  .swiper-pagination1 {

    display: flex;

    justify-content: center;

    margin-top: 1rem;

  }



  .swiper-pagination {

    /* position: relative!important; */

    width: 100%;

    /* text-align: left!important; */

    line-height: 1rem;

    position: absolute!important;

    text-align: center!important;

  }



  .swiper-slider-container {

    width: 25%;

    height: 100%;

    display: flex;

    top: 0;

    flex-direction: column;

    left: 0;

    z-index: 10;

    align-items: flex-start;

    justify-content: center;

    margin-left: 0.5rem;

}



.swiper-slider-container-mobile {

    height: 100%;

    display: flex;

    top: 0;

    flex-direction: column;

    left: 0;

    z-index: 10;

    align-items: flex-start;

    justify-content: center;

    margin-left: 4rem;

}



.swiper-slide {

    width: 100%!important;    

}



  .slider-wrapper {

    display: flex;

    flex-direction: column;

    color: white;

    line-height: 3rem;

  }



  .slider-header {

    font-size: 2.5rem;

    font-weight: 500;

    display: none;

  }



  .slider-subheader {

    font-weight: normal;

    color: white;

    text-transform: none;

    pointer-events: all;

    display: none;

  }



  .swiper-pagination-bullet {

    margin-right: 0.5rem;

    opacity: 1!important;

    background-color: white!important;

    pointer-events: all;

  }



  .swiper-pagination-bullet-active {

    background-color: #f75a04!important;

  }



  .slider-bullet-mobile {

      display: none;

      /*padding: 1rem;*/

  }



  .swiper-button-prev,.swiper-button-next {

      display: none!important;

  }

  

  .footer-container {

     display: flex;

     flex-direction: column;



  }



  .body-loyal {

      background-color: #bcbcbc;

  }



  .body-grab {

    background-image: linear-gradient(#128745, #49b759);

 }



 .body-speedy {

    background-image: linear-gradient(#9b2226, #db0c0e);

 }



 .body-profile {

     background-image: url('../images/ProfileBg.jpg');

     background-size: cover;

     height: 100vh;

 }



 .body-register {

    background-image: url('../images/ProfileBg.jpg');

    background-size: cover;

 }



 .body-news {

    background-image: url('../images/stationBg.jpg');

    background-size: cover;

    background-position: bottom;

 }



 .body-newsSingle {

    background-color:#f2f2f3;

    height: 100%;

    overflow: auto;

 }



 .body-newsAll {

    background-color:#f2f2f3;

    height: 100%;

    overflow: auto;

 }



 .left-news {

     border-right: 1px solid black;

     padding: 0;

 }



 .card-single {

    background-color: transparent;

    margin-bottom: 1rem;

 }



 .card-single:first-child {

    background-color: transparent;

    border-bottom: 1px solid black!important;

    margin-bottom: 1rem;

    border-radius: 0;

 }



 .card-single > .card-body > .card-header {

    background-color: transparent;

 }



 .card-single > .card-body > .card-header {

     border: none;

 }



 .right-news-title {

    color: black;

    font-weight: bold;

    margin-bottom: 3rem

 }



  .loyal-container {

      width: 100%;

      height: 100%;

      display: flex;

      align-items: center;

      justify-content: center;

      background-repeat: no-repeat;

      background-size: cover;

  }



  .grab-container {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background-repeat: no-repeat;

    background-size: cover;

 }



  .speedy-container {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

 }



 .profile-container {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

 }



 .register-container {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    flex-direction: column;

    padding-top: 9rem;

 }



 .register-container > h3 {

     margin-bottom: 2.5rem;

     font-weight: bold;

     text-align: center;

 }



 .news-container {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    flex-direction: column;

    padding-top: 5.5rem;

    margin-bottom: 1rem;

    /* overflow-y: auto; */

 }



 .news-container > h3 {

     margin-bottom: 1rem;

     font-weight: bold;

     text-align: center;

 }



 .newsSingle-container {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    flex-direction: column;

    padding: 12rem 1rem 0 1rem;

    margin-bottom: 1rem;

 }



 .newsSingle-container > h3 {

     margin-bottom: 2.5rem;

     font-weight: bold;

     text-align: center;

 }



 .newsAll-container {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    flex-direction: column;

    padding: 12rem 1rem 2rem 1rem;

    margin-bottom: 1rem;

 }



 .newsAll-container > h3 {

     margin-bottom: 2.5rem;

     font-weight: bold;

     text-align: center;

     color: #f85905;

 }



 .newsAll-container > .row > .card-group > div > .card {

    /* margin: 0.5rem; */

 }



 .newsAll-container > .row {

     justify-content: center;

 }



 .newsAll-container > .row > .card-group

 {

    /* justify-content: center; */



 }



 .profile-points {

    font-size: 4rem;

    font-weight: bold;

    text-shadow: 3px 2px #d15819;

    margin-bottom: 0.75rem;

 }



 .profile-name {

    font-size: 2.5rem;

    font-weight: bold;

 }



 .profile-number {

    font-size: 1.2rem;

 }



 .profile-number > a {

    padding: 0;

    color: white;

    border-bottom: 1px solid white;

    width: fit-content;

    margin-top: 1rem;

    display: block;

 }



 .profile-number > a:hover {

    color: black;

    border-bottom: 1px solid black;

 }



 .profile-digits {

    font-weight: bold;

 }



 .profile-button {

    display: grid;

    grid-auto-flow: column;

    grid-column-gap: 1rem;

    margin-top: 1.5rem;

 }



  .loyalty-card-img {

    max-width: 368px;

    /* max-height: 295px; */

    /* margin-bottom: 1rem; */

    overflow: hidden;

  }



  .grab-card-img {

    max-width: 368px;

    /* max-height: 295px; */

    /* margin-right: 4rem; */

    margin-bottom: 1rem;

    overflow: hidden;

  }



  .speedy-card-img {

    max-width: 368px;

    /* max-height: 295px; */

    /* margin-right: 4rem; */

    margin-bottom: 1rem;

  }



  .mySwiper1 > div > div > img {

    max-height: 295px;

  }



  .profile-card-img {

    max-width: 35rem;

    margin: auto;

    margin-bottom: 1rem;

  }



  .loyal_row {

    justify-content: center;

    margin-top: 1rem;

  }



  .partner_row {

    justify-content: center;

    margin-top: 1rem;

  }



  .col-profile {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    color: white;

  }



  .col2 {

    color: white;

    border-bottom: 1px solid white;

    font-size: 0.8rem;

  }



  .col3 {

    color: white;

    border-bottom: 1px solid white;

  }



  .col4 {

    color: #f85905;

    border-bottom: 1px solid #f85905;

    font-size: 0.8rem;

    float: right;

  }



  .card {

    border: 0;

    height: 100%;

  }



  .card-header {

    padding: 0;

    background-color: white;

    padding-bottom: 1rem;

    border-color: black;

  }



  .card-title {

    color: #f85905;

    font-weight: bold;

  }



  

  .card-title2 {

    color: #f85905;

    font-weight: bold;

    margin-bottom: 0.5rem;

  }



  .card-left{

    width: 70%;

    margin: 2rem auto;

    display: block;

  }



  .card-subtitle {

    color: black;

    font-size: 0.7rem;

    font-weight: bold;

  }



  .card-subtitle2 {

    color: black;

    font-size: 0.9rem;

    font-weight: bold;

    margin-bottom: 1.5rem;

  }



  .card-text {

    color: black;

    font-size: 0.8rem;

    margin: 0.5rem 0;

  }



  

  .card-text2 {

    color: black;

    font-size: 0.7rem;

    margin: 1.5em 0;

  }

  

  .col4:hover {

    color: #f85905;

  }



  .form-check {

      font-size: 0.9rem;

      margin-bottom: 1rem;

  }



  .btn-loyalty {

      font-weight: bold;

      padding: 0.2rem 0.6rem;

      margin-right: 3rem;

  }



  .btn-grab {

    font-weight: bold;

    padding: 0.2rem 0.6rem;

  }



  .btn-speedy {

    font-weight: bold;

    padding: 0.2rem 0.6rem;

  }



  .btn-reg {

    font-weight: bold;

    padding: 0.2rem 0.6rem;

  }



  .left_part {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-end;

  }



  .content-container {

    max-height: 18.5rem;

    overflow-y: scroll;

    max-width: 40rem;

    color: white;

  }



  .content-image {

      max-width: 175px;

      margin-bottom: 1rem;

  }



 .content-title {

    max-width: 34rem;

    border-bottom: 1px solid white;

    margin-bottom: 1.5rem;

    color: white;

    padding-bottom: 0.5rem;

 }



  .content {

    margin-right: 3rem;

}



.reg-form {

    width: 100%;

    max-width: 54rem;    

}



.form-reg {

    border: none;

    border-bottom: 1px solid white;

    padding: 5px 10px;

    outline: none;

    border-radius: 0;

    color: white;

    background-color: transparent;

}



.form-reg::placeholder {

    color: white;

}



.form-control:focus {

    background-color: transparent;

    outline: 0;

    box-shadow: none; 

    border-color: white;

    color: white;

}



option {

    color: black;

}



input:-webkit-autofill { 

    -webkit-background-clip: text;

    -webkit-text-fill-color: white;

}



.form-check-label:before{

    background-color:red;

} 



.checkbox-form {

    justify-content: center;

    flex-direction: column;

    /* gap: 1rem; */

    margin-top: 2rem;

}



.card-deck {

    margin: 0 1rem;

}



.card {

    /* max-height: 430px; */

    min-height: 430px;

    /* min-width: 19rem; */

}



.view-all {

    margin-top: 0.5rem;

    width: 100%;

    padding: 0 1rem;

}



.footer-newsSingle {

    position: relative;

}



.footer-newsAll {

    position: relative;

}



.nav-item {

    position: relative;

}



.dropdown-menu {

    border-top: 0.5rem solid #f75a04;

    border-radius: 0;

    margin: 0;

}



  ::-webkit-scrollbar {

    width: 0.5rem;

  }



  ::-webkit-scrollbar-track {

    background: #888;

    border-radius: 20px;

  }



  ::-webkit-scrollbar-thumb {

    background: #f1f1f1;

    border-radius: 20px;

  }

  

  ::-webkit-scrollbar-thumb:hover {

    background: #f1f1f1;

  }



  .login-link {

    color: white;

  }



  .swiper-pagination2 {

    text-align: center;

    margin-top: 1rem;

  }



  .mySwiperMobile {

      display: none;

  }



  .swiper-pagination2 {

      display: none;

  }



@media only screen and  (max-width: 1255px) {

    .icon-container > a > img {

        width: 1.5rem;

    }



}





@media only screen and  (max-width: 992px) {

        .navbar-collapse {

        position: absolute;

        width: 100%;

        background-color: black;

        top: 100%;

        left: 0px;

        text-align: center;

    }



    /* .navbar-nav {

        padding: 1rem;

        z-index: 2;

    } */



    .login-container {

        justify-content: center;

    }

    

    .login-form {

        margin: 0;

    }



}



@media only screen and  (min-width: 992px) {

    .navbar-expand-lg .navbar-collapse {

        height: 100%;

        padding-top: 1rem;

        justify-content: center;

    }



    .navbar-nav {

        /* gap: 1rem; */

    }



    .navbar-nav li {

        display: flex;

        align-items: center;

        border-bottom: 0.5rem rgba(255, 255, 255, 0) solid;



    }



    .navbar-nav li.active {

        border-bottom: 0.5rem solid #f75a04;

    }

/* 

    .nav-item:hover {

        border-bottom: 0.5rem orange solid;

        color: rgba(255,255,255,.75);

    } */

}



    .mobile-bg {

        width: 100%;

        height: 100%;

    }



    .mobile-bg > div {

        width: 100%;

        height: 100%;

    }



    .mySwiper,.mySwiperMobile {

        overflow: hidden;

    }



@media only screen and  (min-width: 768px) {

    .mobile-bg {

        display: none;

    }

}



@media only screen and  (max-width: 785px) {



    body {

        height: 100%;

    }



    .homepage {

        height: 110vh;

    }

    

    .container-bottom {

        position: relative;

        bottom: 0;

        left: 0;

        padding: 0;

    }



    .footer-news {

        position: absolute;

    }



    .swiper-slider-container{

        display: none;

    } 



    .slider-bullet-mobile {

        display: block;

        background-image: linear-gradient(orange, #F75A04);

        text-align: center;

    }

    .slider-bullet-mobile > .swiper-slider-container-mobile {

        margin:0;

    }

    body {

        overflow-y: auto;

    }

    

    .body-profile {

        height: 100%!important;

    }

    

    #example_wrapper {

        overflow-x: auto;    

    }

    

    .profile-container {

        padding: 5rem 0;

    }

    

    .col-table {

        margin-top: 2rem;

    }

    

    .dataTable {

        width: 600px!important;    

    }

    

    .table-header,.table-subheader {

        text-align: center;

    }

    /* .swiper-button-prev,.swiper-button-next {

        display: block!important;

        color: #f75a04!important;

    } */

    

    .left_part {

        align-items: center;

    }

    

    .btn-loyalty {

        margin: 0;

    }



    .left_part {

        margin: 3rem 0 2rem 0;

        flex: 0 0 100%;

        max-width: 100%;

    }



    .right_part {

        flex: 0 0 100%;

        max-width: 100%;

    }



    .content-container {

        overflow: hidden;

        max-height: none;

        padding-bottom: 2rem;

        max-width: 100%;

    }



    .navbar {

        padding: 0 1rem;

        gap: 0rem;

        height: auto;

        z-index: 99;

    }



    .login-container {

        height: 71%;

        top: 10%;

    }

    

    .footer {

        font-size: 0.75rem;

    }



    .loyal-container {

        height: auto;

    }



    .homepage > .container-bottom {

        position: absolute;

    }

    

    .content {

        margin-right: 0rem;

    }



    .grab-card-img {

        margin: auto;

        margin-bottom: 1rem;

    }



    .btn-grab:nth-child(2) {

        margin: 0;

    }



    .speedy-card-img {

        margin: auto;

    }



    .btn-speedy:nth-child(2) {

        margin: 0;

    }



    .profile-row {

        padding-top: 0!important;

    }



    .navbar-nav {

        height: auto;

        padding: 1rem 0;

    }



    .register-container {

        margin-bottom: 2rem;

    }

    .body-news {

        height: 100vh;

    }



    .dropdown-menu {

        position: relative!important;

    }

    

    .navbar-nav li {

        flex-direction: column;

    }

}



@media only screen and  (max-width: 767px) {

    .left-news {

        border: none;

    }



    .mySwiper.desktop {

        display: none;

    }

}



@media only screen and  (max-width: 575px) {

    .footer-news {

        position: relative;

    }



    .body-news {

        height: 100%!important;

    }



    .mySwiperMobile {

        display: block;

    }



    .mySwiper {

        display: none;

    }



    .login-container {

        flex-direction: column;

    }



    .swiper-pagination2 {

        display: block;

    }

}



/* Portrait */

@media only screen 

  and (min-device-width: 768px) 

  and (max-device-width: 768px) 

  and (orientation: portrait) 

  and (-webkit-min-device-pixel-ratio: 2) {



    .mySwiperMobile {

        display: block;

    }



    .mySwiper {

        display: none;

    }



    .login-container {

        flex-direction: column;

    }



    .swiper-pagination2 {

        display: block;

    }



}



@media only screen and  (max-width: 768px) {

    .form-group {

        justify-content: flex-start;

    }

}



@media only screen and  (max-width: 415px) {

    /* .swiper-wrapper {

        display: none!important;

    } */



    .swiper-container {

        /* pointer-events: none; */

    }



    .newsAll-container, .newsSingle-container {

        padding: 7rem 1rem 0 1rem;

    }



    .card-left {

        width: 100%;

    }

    

}







/* Portrait */

@media only screen 

  and (min-device-width: 1024px) 

  and (max-device-width: 1366px) 

  and (-webkit-min-device-pixel-ratio: 2) 

  and (orientation: portrait) {



    .navbar {

        background-position: 14%;

    }



}



@media only screen 

  and (max-device-width: 1024px)  {



    .navbar-nav {

        gap: 1rem;

    }



}



@media only screen 

  and (min-device-width: 1366px)  {





}



/* Landscape */

/* Declare the same value for min- and max-width to avoid colliding with desktops */

/* Source: https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106*/

@media only screen 

  and (min-device-width: 1366px) 

  and (max-device-width: 1366px) 

  and (orientation: landscape) 

  and (-webkit-min-device-pixel-ratio: 2) {

    .navbar-nav {

        gap: 1.5rem;

        left: 3rem;

        position: relative;

    }

}





.main {

    display: block;

    position: relative;

    padding-left: 45px;

    margin-bottom: 15px;

    cursor: pointer;

    font-size: 20px;

}

  

/* Hide the default checkbox */

input[type=checkbox] {

    visibility: hidden;

}

  

/* Creating a custom checkbox

based on demand */

.geekmark {

    position: absolute;

    top: 0.2rem;

    left: -0.1rem;

    height: 1rem;

    width: 1rem;

    background-color: transparent;

    border: 1px solid white;

}

  

/* Specify the background color to be

shown when hovering over checkbox */

/* .form-check-label:hover input ~ .geekmark {

    background-color: yellow;

} */

  

/* Specify the background color to be

shown when checkbox is active */

/* .form-check-label input:active ~ .geekmark {

    background-color: red;

} */

  

/* Specify the background color to be

shown when checkbox is checked */

.form-check-label input:checked ~ .geekmark {

    background-color: transparent;

}

  

/* Checkmark to be shown in checkbox */

/* It is not be shown when not checked */

.geekmark:after {

    content: "";

    position: absolute;

    display: none;

}

  

/* Display checkmark when checked */

.form-check-label input:checked ~ .geekmark:after {

    display: block;

}

  

/* Styling the checkmark using webkit */

/* Rotated the rectangle by 45 degree and 

showing only two border to make it look

like a tickmark */

.form-check-label .geekmark:after {

    left: 0.2rem;

    bottom: 0.2rem;

    width: 7px;

    height: 12px;

    border: solid white;

    border-width: 0 3px 3px 0;

    -webkit-transform: rotate(

45deg

);

    -ms-transform: rotate(45deg);

    transform: rotate(

45deg

);

}



/*ipad air*/

@media all and (device-width: 834px) and (device-height: 1112px) and (orientation:landscape) {

    .register-container {

        padding-top: 3rem;

    }



    .navbar-brand {

        margin-right: 9rem;

    }



    .nav-item {

        margin-right: 0.5rem;

    }



    .icon-container > a > img {

        width: 1.25rem;

    }



    .navbar-nav {

        margin-right: -1rem;

    }



}



/*ipad air*/

@media all and (device-width: 834px) and (device-height: 1112px) and (orientation:portrait) {

    .grab-card-img {

        max-width: 310px!important;

    }



    .loyalty-card-img {

        max-width: 310px!important;

    }



    .navbar-nav li {

        margin-bottom: 1rem;

    }

}



.col-4 {

    padding-bottom: 15px;

}



iframe {

    width: 100%;

}



thead, tbody {

    text-align: center;

}