/* ===== responsive css ===== */



/* ===== ipad devices  ===== */
@media (max-width: 768px) {
    html {
        font-size: 8px;
    }

    .banner-content h5 {
        font-size: 4.2rem;
    }

    .banner-content span {
        font-size: 3.8rem;
    }
    .accordian h3::after{
        width:20px;
        height:11px;
    }
}

/* ===== extra small devices  ===== */
@media (max-width: 640px) {
    html {
        font-size: 10px;
    }

    h2 {
        font-size: 3.8rem;
    }

    h3 {
        font-size: 2.2rem;
    }

    .top-header {
        padding: 1.2rem 0;
        height: auto;
    }

    .sticky-head-mobile {
        position: fixed;
        top: 0;
        background-color: #fff;
        z-index: 99;
    }

        .sticky-head-mobile.shadowHeader {
            -webkit-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.13);
            -moz-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.13);
            box-shadow: 0 8px 6px -6px rgba(0,0,0,0.13);
        }

    .banner-wrap, .mobile-container {
        margin: 6.6rem 0 0;
    }

    .logo {
        width: 125px;
    }

    .login-btn {
        font-size: 1.6rem;
    }

    .login-option {
        top: 4.3rem;
    }

    .banner-content-wrap {
        min-height: auto;
        margin: 1rem 0 0;
        padding: 0 0 3rem;
    }

    .banner-logo {
        width: 19.6rem;
        position: static;
        margin: 1rem 0 0;
    }

    .banner-content {
        position: relative;
        min-height: 18rem;
    }

        .banner-content h5 {
            font-size: 3.8rem;
            line-height: 4.5rem;
            margin: 0;
        }

        .banner-content span {
            font-size: 3.4rem;
            display: block;
            width: 82%;
        }

    .banner-img {
        position: absolute;
        right: -4.5rem;
        bottom: 2rem;
        width: 22rem;
        top: unset;
    }

    .wallet-img {
        right: -2rem;
        width: 16.5rem;
    }

    .payzapp-logo {
        width: 12.0rem;
    }

    .btn-container {
        padding: 2rem 0 2rem 0;
    }

        .btn-container a {
            min-width: 16.8rem;
            font-size: 2rem;
        }

            .btn-container a:first-child {
                margin: 0 0.8rem 0 0;
            }

    .fees-charge-wrap {
        padding: 2rem 0;
    }

    .title-wrap {
        margin: 0 0 2rem;
        justify-content: space-between;
    }

    .title-img {
        margin: 0 1rem 0 0;
        flex: 0 0 12rem;
    }

    .arrow-icn {
        margin: 0;
        background-size: 1.5rem;
    }

    .find-ans-wrap {
        padding: 1rem 1.5rem;
    }

    .accordian h3 {
        font-size: 1.8rem;
        font-weight: 500;
        padding: 1.8rem 2rem 1.8rem 0;
        line-height: 2.8rem;
    }

    .accrdn-content h4 {
        font-size: 1.6rem;
    }

    .accordian p {
        font-size: 1.4rem;
    }

    .contact-us-wrap {
        flex-wrap: wrap;
    }

    .info-details h4,
    .info-details h4 a {
        font-size: 2rem;
        font-weight: 400;
    }

    .info-details p {
        font-size: 1.2rem;
    }

    .contact-icn {
        width: 2rem;
        height: 2rem;
    }

    .contact-us-wrap {
        justify-content: space-between;
        width: 90%;
    }

        .contact-us-wrap li {
            padding: 0;
            max-width: 100%;
        }

            .contact-us-wrap li::after {
                display: none;
            }

            .contact-us-wrap li:first-child {
                margin: 0 0 1.6rem 0;
            }

    .footer-nav {
        flex-wrap: wrap;
        justify-content: center;
    }

        .footer-nav li {
            margin: 0 0 1rem;
        }

            .footer-nav li a {
                padding: 0 1rem;
            }

            .footer-nav li:nth-child(3)::after {
                display: none;
            }

    .copyright-txt {
        text-align: center;
        margin: 0;
    }

    .car-img {
        width: 100%;
    }

    /*======= inner pagesg css =======*/
    .mobile-header {
        display: flex;
        align-items: center;
    }

    .back-icn {
        -webkit-transform: rotate(-180deg);
        -moz-transform: rotate(-180deg);
        transform: rotate(-180deg);
        width: 1rem;
        margin: 0 1rem 0 0;
    }

    .mobile-header h5 {
        font-size: 2rem;
        font-weight: 300;
    }

    .logo-wrap {
        display: none;
    }

    .find-ans-container {
        padding: 0;
    }

    .breadcrumb,
    .mobile-container h2 {
        display: none;
    }

    .fast-accnt-wrapper {
        margin: 0;
        position: relative;
        padding: 2.2rem;
    }

    .mobile-banner {
        padding: 0;
    }

        .mobile-banner .row {
            margin: 0;
        }

        .mobile-banner .col-sm-12 {
            padding: 0;
        }

    .fast-right-img {
        width: 16rem;
        position: absolute;
        right: 2rem;
        top: 3rem;
    }

    .fast-left-offer {
        text-align: center;
    }

        .fast-left-offer h3 {
            text-align: left;
            width: 55%;
            font-size: 2.5rem;
        }

        .fast-left-offer a {
            font-size: 1.8rem;
            height: 4rem;
            line-height: 3.8rem;
        }

    .white-bg {
        padding: 1.5rem;
    }

        .white-bg h3 {
            font-size: 2.4rem;
        }

    .charges-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .other {
        width: 100%;
        flex: 0 0 100%;
    }

    .charges-column h4 {
        font-size: 1.2rem;
    }

    .charges-column ul li:last-child {
        margin: 0;
    }

    .charges-column ul p {
        flex-direction: column;
        align-items: flex-start;
    }

        .charges-column ul p span {
            margin: 0;
        }

    .convenience {
        flex: 0 0 100%;
        padding: 0 0 1.6rem;
        margin: 0 0 1.6rem;
        border-bottom: 1px solid #DDDDDD;
        border-right: 0;
    }

    .fasttag-fees-wrap .table th {
        font-size: 1.1rem;
        padding: 0 1rem 1.5rem 1rem;
    }

    .fasttag-fees-wrap .table td h4,
    .fasttag-fees-wrap .table td {
        font-size: 2rem;
    }

    .fasttag-fees-wrap .table td {
        padding: 1.5rem 1rem;
    }

        .fasttag-fees-wrap .table td p {
            font-size: 1.1rem;
            font-weight: 500;
            margin: 0.5rem 0 0;
        }

    .search-ans input {
        padding: 0 3.5rem 0 1.4rem;
        height: 4.8rem;
        font-size: 1.8rem;
    }

    .search-icn {
        right: 1rem;
        width: 1.6rem;
    }

    .inner-title {
        font-weight: 300;
    }

    .accordian h3::after {
        background-size: 70%;
        top: 2.8rem;
    }

    .fees-title {
        flex: 0 0 18.5rem;
    }
}

@media (max-width: 374px) {
    .btn-container a {
        min-width: 15rem;
        font-size: 1.5rem;
    }

    .title-img {
        flex: 0 0 10rem;
    }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .banner-content {
        opacity: 1 !important;
    }

    .accordian h3::after {
        background-size: 71%;
    }

    #giftBox, #wallet, #footerAnim, #feesCharge {
        background-image: url(../resources/fonts/gift-box.svg);
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: center;
        width: 22.1rem;
        height: 29.5rem;
    }

    #wallet {
        background-image: url(../resources/fonts/wallet.svg);
    }

    #footerAnim {
        background-image: url(../resources/fonts/footer-car.svg);
        height: auto;
        width: 36.2rem;
    }

    #feesCharge {
        background-image: url(../resources/fonts/fees-charger-icn.svg);
        height: 10.5rem;
        width: 16.5rem;
    }
}