html {
    font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }

    .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
        box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
    }

    html {
        position: relative;
        min-height: 100%;
    }

    body {
        padding: 0px !important;
        height: 100%;
        margin: 0;
    }

    .wrapper {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    #divMain {
        margin: 0px !important;
        padding: 0px !important;
    }

    #div-About-Main {
        background-color: #29459E;
        padding: 100px;
        min-height: 100vh;
        padding-top: 40px;
        background: url('../Images/Station1.png') no-repeat 0px 0px;
        background-size: cover;
        background-position: top;
    }
    #divAboutHeader {
        padding-bottom: 30px;
        width: 80%;
        margin: auto;
        color: #1D2473;
        font-weight: bold;
        font-size: 30px;
        cursor: default;
        font-family: Montserrat !important;
        background: none;
    }
    #divAboutTitle {
        color: white;
        text-align: left;
        font-size: 55px;
        font-weight: bold;
        margin: auto;
        width: 80%;
        padding-bottom: 20px;
        cursor: default;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        font-family: Montserrat !important;
    }
    #divAboutDesc {
        width: 83%;
        margin: auto;
        color: white;
        font-size: 25px;
        text-align: justify;
        padding: 25px 40px 30px 40px;
        cursor: default;
        background-color: #1D2473;
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
        font-family: Montserrat !important;
    }
    #divAboutLogo {
        background: url('../Images/Choose.png') no-repeat 0px 0px;
        height: 120px;
        width: 700px;
        background-size: contain;
        float: right;
        margin-top: 20px;
    }
    #divEarnPoint {
        background: url('../Images/earnPetronPoint.jpg') no-repeat 0px 0px;
        height: 90px;
        width: 500px;
        background-size: contain;
    }

    #divLogo {
        background: url('../Images/PMILES_Logo.png') no-repeat 0px 0px;
        height: 70px;
        width: 200px;
        background-size: contain;
        cursor: pointer;
    }

    #FAQ-Header {
        margin-top: 5px;
        width: 100%; /* or any specific width */
        height: 500px;
        background: url('../Images/FAQ_Banner.png') no-repeat 0px 0px;
        background-size: cover;
        background-position: top;
        display: flex;
        justify-content: flex-end; /* align horizontally to right */
        align-items: flex-end; /* align vertically to bottom */
        color: white;
        padding-right: 50px;
        padding-bottom: 30px;
        font-size: 50px;
        font-weight: bold;
        cursor: default;
        font-family: Montserrat !important;
    }
    #Redeem-Header {
        margin-top: 5px;
        width: 100%; /* or any specific width */
        height: 60px;
        background-color: #F4F4F4;
        display: flex;
        justify-content: flex-start; /* align horizontally to right */
        align-items: center; /* align vertically to bottom */
        font-size: 20px;
        font-weight: bold;
        cursor: default;
        font-family: Montserrat !important;
        border-bottom: 5px solid maroon;
    }
    #divFAQTabs {
        text-align: center;
        margin: auto;
        padding: 20px;
        font-size: 0px;
    }
    #divQNAs {
        margin: auto;
        text-align: center;
        padding-top: 20px;
        padding-bottom: 50px;
    }
    #divRedeemForm {
        margin: auto;
        text-align: center;
        padding-top: 30px;
        padding-bottom: 50px;
        width: 75%;
    }
    #tblRedeem {
        border: 1px solid #E0E0E0;
        border-collapse: collapse;
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
    }
    #tblRedeem th {
        background-color: #F4F4F4;
        padding: 8px;
        cursor: default;
        font-size: 18px;
    }
    #tblRedeem td {
        padding: 15px;
        border: 1px solid #E0E0E0;
        cursor: default;
    }
    .merch-icon {
        width: 100px;
    }
    #merch-1 {
        height: 70px;
        background-image: url("../images/merchandises/tng.png");
        background-repeat: no-repeat; /* prevent tiling */
        background-position: center; /* center horizontally & vertically */
        background-size: contain; /* scale image to fill div */
    }
    #merch-2 {
        height: 100px;
        background: url('../images/merchandises/watsons.png') no-repeat 0px 0px;
        background-repeat: no-repeat; /* prevent tiling */
        background-position: center; /* center horizontally & vertically */
        background-size: contain; /* scale image to fill div */
    }
    #merch-3 {
        height: 100px;
        background: url('../images/merchandises/tealive.png') no-repeat 0px 0px;
        background-repeat: no-repeat; /* prevent tiling */
        background-position: center; /* center horizontally & vertically */
        background-size: contain; /* scale image to fill div */
    }
    
    .divCell {
        display: flex;
        flex-direction: row; /* Stack children vertically */
        justify-content: center; /* horizontal centering */
        align-items: center; /* vertical centering */
    }
    .merch-title {
        font-weight: bold;
        text-align: left;
        padding-left: 10px;
        padding-right: 10px;
    }
    .merch-desc {
        text-align: left;
        font-size: 13px;
        padding-left: 10px;
        padding-right: 10px;
    }
    .txt-merch {
        width: 80px;
        height: 30px;
        text-align: center;
        border-radius: 0px;
        border: 1px solid #E0E0E0;
    }
    .btnMinus {
        border: 1px solid #E0E0E0;
        height: 30px;
        width: 28px;
        display: grid;
        place-items: center; /* shorthand for horizontal + vertical centering */
    }
    .btnPlus {
        border: 1px solid #E0E0E0;
        height: 30px;
        width: 28px;
        display: grid;
        place-items: center; /* shorthand for horizontal + vertical centering */
    }
    .btnMinus:hover {
        border: 1px solid #cebb07;
        background-color: #f9f8e9;
    }
    .btnPlus:hover {
        border: 1px solid #cebb07;
        background-color: #f9f8e9;
    }
    #div-footer {
        margin-top: 12px;
        display: flex;
        flex-direction: row; /* Stack children vertically */
        justify-content: right; /* horizontal centering */
        align-items: center; /* vertical centering */
    }
    .redeem-footer {
        background-color: #E0E0E0;
        padding: 8px;
        font-weight: bold;
        border: 1px solid #f1f5f8;
    }
    #lblTotal {
        width: 150px;
    }
    #txtTotalPts {
        width: 140px;
    }
    #txtTotalQty {
        width: 180px;
    }
    #redeem-bottom {
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
    }
    .redeem-divider {
        margin-top: 50px;
        display: flex;
        justify-content: flex-start; /* align horizontally to right */
        align-items: center; /* align vertically to bottom */
        font-size: 18px;
        background-color: #F4F4F4;
        border-top: 1px solid #e8eaf1;
        border-bottom: 4px solid maroon;
        padding: 7px 5px 5px 15px;
        font-family: Montserrat;
        font-weight: bold;
    }
    #divDetail {
        display: flex;
        flex-direction: column; /* Stack children vertically */
        justify-content: center; /* horizontal centering */
        align-items: center; /* vertical centering */
        padding-top: 30px;
        padding-bottom: 60px;
        font-family: Montserrat;
    }
    .detail-row {
        width: 500px;
        display: flex;
        flex-direction: column; /* Stack children vertically */
        justify-content: center; /* horizontal centering */
        align-items: flex-start; /* vertical centering */
        margin-top: 11px;
        margin-bottom: 11px;
    }
    .div-detail-title{
        font-size: 14px;
        color: #a2a3aa;
        margin-bottom: 3px;
    }
    .div-detail-right {
        width: 100%;
    }
    .area-details{
        height: 100px;
    }
    .div-submit{
        margin-top: 25px;
    }
    #btnRedeemSubmit {
        width: 210px;
        padding: 7px;
        font-family: Montserrat;
        background-color: #016FFB;
        border: 2px solid #016FFB;
        color: white;
        border-radius: 7px;
    }
    #btnRedeemSubmit:hover{
        border: 2px solid #2310b0;
        background-color: #747dc6;

    }

    .FAQ-Tab {
        display: inline-block;
        font-weight: bold;
        font-size: 17px;
        padding: 20px;
        padding-bottom: 5px;
        cursor: pointer;
        border-bottom: 2px solid #e16a6a;
        color: #1D2473;
        margin: 0 !important;
        font-family: Montserrat !important;
    }
    .Active-Tab {
        border-bottom: 5px solid #b90505;
    }

    .divFAQSearch {
        display: flex;
        flex-direction: row; /* Stack children vertically */
        justify-content: center; /* horizontal centering */
        align-items: end; /* vertical centering */
        width: 70% !important;
        margin: auto;
        padding-top: 20px;
        padding-bottom: 10px;
    }

    #txt-FAQ-Search {
        background: url('/images/Gray_Search.png') no-repeat 5px 4px;
        background-size: 22px 22px;
        padding-left: 40px;
        border: 2px solid #9fb3e7;
        border-right: none;
        height: 35px;
        background-color: white;
        width: 100%;
        border-radius: 0px;
        font-family: Montserrat;
    }

    #btn-FAQ-Search {
        color: white;
        background-color: #2e2d31;
        width: 100px;
        height: 35px;
        border: 1px solid #2e2d31;
        font-family: Montserrat;
    }

    .highlight {
        background-color: yellow;
        color: #b40c0c;
    }

    .question {
        margin: auto;
        width: 70%;
        margin-bottom: 7px;
        text-align: left;
        padding: 12px 20px 8px 20px;
        cursor: pointer;
        background-color: #EAEFFF;
        font-weight: 700;
        font-size: 15px;
        background-image: url('/images/ArrowDown.png');
        background-repeat: no-repeat;
        background-position: calc(100% - 15px) 12px; /* Right: 10px from edge, Top: 10px */
        transition: background-image 0.3s ease;
        font-family: Montserrat !important;
    }
    .question:hover{
        background-color: #d6e1fd;
    }
    .bg1 {
        background-image: url('/images/ArrowDown.png');
    }
    .bg2 {
        background-image: url('/images/ArrowUp.png');
    }
    .answer {
        display: none;
        font-weight: normal;
        color: #1D2473;
        padding-top: 15px;
        padding-bottom: 7px;
        font-size: 14px;
        font-weight: 500;
        cursor: default;
    }
    .tblFAQ th{
        background-color: #84a2da;
        padding: 7px 15px 7px 15px;
        border: 1px solid #d0d7f4;
    }
    .tblFAQ td {
        background-color: #dadef9;
        padding: 7px 15px 7px 15px;
        border: 1px solid #d0d7f4;
    }

    #divBG-container {
        height: 90vh !important;
        display: flex;
        flex-direction: row; /* Stack the children vertically */
        align-items: center; /* Center horizontally */
        justify-content: center; /* Center vertically */
        padding-left: 30px;
        padding-right: 30px;
    }
    #divBG1-left {
        height: 100% !important;
        width: 50% !important;
        background: url('../Images/Maintenance-Ilustration.png') no-repeat 0px 0px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }
    #divBG1-right {
        text-align: center;
        color: #1D2473;
        font-size: 18px;
        width: 50% !important;
        padding-right: 50px;
    }
    #divBG2-left {
        height: 100% !important;
        width: 50% !important;
        background: url('../Images/Maintenance-Ilustration.png') no-repeat 0px 0px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }

    #divBG2-right {
        text-align: center;
        color: #1D2473;
        font-size: 18px;
        width: 50% !important;
        padding-right: 50px;
    }
    #div-MT-title {
        height: 200px;
        background: url('../Images/System-Maintenance.png') no-repeat 0px 0px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        display: block;
    }
    #div-MT-date {
        font-family: Montserrat;
        width: 350px;
        margin: auto;
        font-weight: bold;
        font-size: 32px;
        background-color: #1D2473;
        color: white;
        padding: 5px;
        border-radius: 10px;
        margin-top: 5px;
        cursor: default;
    }
    #div-MT-desc {
        width: 600px;
        margin: auto;
        font-family: Montserrat;
        font-size: 22px;
        font-weight: 500;
        padding-top: 20px;
        padding-bottom: 20px;
        cursor: default;
    }

    #divBG3 {
        height: 58vh;
        background: url('../Images/PC_BG3.png') no-repeat 0px 0px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }

    #divBG2 {
        height: 360px !important;
        background: url('../Images/Banner_Web.png') no-repeat 0px 0px !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        width: 100%;
        padding-left: 100px !important;
        display: flex;
        justify-content: left; /* horizontal centering */
        align-items: center; /* vertical centering */
    }
    .divMidContainer {
        background: url('/images/Merchandise-Banner-Web.png') no-repeat 0px 0px !important;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        height: 150px;
        display: flex;
        flex-direction: row; /* Stack children vertically */
        justify-content: center; /* horizontal centering */
        align-items: center; /* vertical centering */
        border-top: 1px solid #e0eaf6;
    }
    #divMidImg {
        height: 100px;
        width: 100px;
        background-image: url('/images/Merchandise-Icon.png') !important;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        margin-right: 35px;
        margin-bottom: 0px;
    }
    .divMidDesc {
        margin-right: 30px;
        margin-bottom: 0px;
        font-weight: bold;
        font-size: 20px;
        font-family: Montserrat;
        color: #32327F;
        cursor: default;
    }
    .divMidClickHere {
        background-color: #32327F;
        border: 1px solid #32327F;
        border-bottom-right-radius: 12px;
        color: white;
        padding: 4px 30px 4px 30px;
        font-family: Montserrat;
        font-size: 17px;
        font-weight: bold;
    }
    .divBottomContainer {
        background-color: #32327F;
    }

    #divBG_Desc3 {
        text-align: center;
        color: #1D2473;
        font-size: 20px;
        padding-bottom: 50px;
        width: 650px;
        margin: auto;
    }

    #tbl-Download-App {
        margin: 0px !important;
        text-align: left;
    }

    .btn-download-app {
        width: 125px;
        height: 40px;
        margin: auto;
        background-size: 125px 40px !important;
        cursor: pointer;
        border-radius: 7px;
        border: 1px solid #989ab2;
    }

    .btn-download-app:hover {
        border: 1px solid #acc6f7;
    }
    #divDL {
        margin-top: 30px;
        display: flex;
        flex-direction: row; /* Stack children vertically */
        justify-content: left; /* horizontal centering */
        align-items: center; /* vertical centering */
    }
    #btnDownloadNow {
        background-color: white !important;
        color: #1D2473 !important;
        width: 262px;
        height: 45px;
        font-size: 22px;
        padding-top: 5px;
        border-radius: 30px;
        cursor: default;
        margin: auto;
        margin-right: 20px;
        text-align: center;
        font-weight: bold;
    }
    #btnDownloadNow:hover{
        cursor: pointer;
    }
    #btn-AppStore{
        display: inline-block;
    }
    #btn-PlayStore {
        display: inline-block;
    }

    .divBannerTitle {
        color: white !important;
        font-size: 40px;
        cursor: default;
        font-weight: bold;
        font-family: Montserrat;
        padding: 0px;
    }
    #divBannerDesc {
        color: white !important;
        font-size: 16px;
        cursor: default;
        font-family: Montserrat;
    }

    .tdEmpty {
        height: 5px;
        font-size: 10px;
    }

    #footer1 {
        padding: 20px !important;
        padding-top: 35px;
        border-top: 1px solid #e7ebf9;
        display: flex;
    }

    #footer2 {
        padding: 8px;
        padding-left: 20px;
        background-color: #1D2473;
        color: white;
        font-size: 11px;
        border-top-right-radius: 10px;
    }

    #tblFooter {
    }

    .footerTitle {
        color: #1D2473;
        font-size: 20px;
        font-weight: bold;
        padding-bottom: 10px;
    }
    .footerHeader {
        display: table-cell;
        flex: 1;
    }
    #divFollowUs {
        padding-top: 0px;
    }

    .tdFooter {
        font-size: 16px;
        font-weight: 500;
        color: #54555b;
        cursor: default;
    }

    #tblFooter td {
        /*border: 1px solid black;*/
    }

    #logoFacebook {
        background: url('../Images/facebook.png') no-repeat 0px 0px;
        background-size: contain;
    }

    #logoInstagram {
        background: url('../Images/instagram.png') no-repeat 0px 0px;
        background-size: contain;
    }

    #logoTwitter {
        background: url('../Images/twitter.png') no-repeat 0px 0px;
        background-size: contain;
    }

    #logoYoutube {
        background: url('../Images/youtube.png') no-repeat 0px 0px;
        background-size: contain;
    }

    #logoTicktok {
        background: url('../Images/tiktok.png') no-repeat 0px 0px;
        background-size: contain;
    }

    .ftr-logo {
        display: inline-block;
        width: 30px;
        height: 30px;
        border: 1px solid #cccccf;
        cursor: pointer;
    }

    .ftr-logo:hover {
        border: 1px solid #a5b1f4;
    }

    .footer-btn {
        color: #5463ca;
        cursor: pointer;
        text-decoration: underline;
    }
    .footer-btn:hover {
        color: blue;
    }
    #footerEmail {
        color: #5463ca;
        cursor: pointer;
    }
    #footerEmail:hover {
        color: blue;
    }

    .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
        color: var(--bs-secondary-color);
        text-align: end;
    }

    .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
        text-align: start;
    }
}