/* custom fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

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

html {
    font-size: 10px;
    height: 100%;
}

body {
    background: #F5F5F7;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.6rem;
    color: #1B1B1D;
    padding: 0;
    margin: 0;
}

img {
    max-width: 100%;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

a,
a:hover,
button {
    text-decoration: none;
    outline: none;
}

    a:active,
    a:focus {
        outline: none !important;
        box-shadow: none !important;
    }

a {
    color: #1d86ff;
}

/* clears the ‘X’ from Internet Explorer */
input[type=search]::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

input[type=search]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

/* clears the ‘X’ from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

h2 {
    font-size: 4.8rem;
    color: #1B1B1D;
    font-weight: 300;
    margin: 0;
}

h3 {
    font-size: 3.2rem;
    color: #1B1B1D;
    font-weight: 300;
    margin: 0;
}

h4 {
    font-size: 1.8rem;
    color: #6D6D6D;
    margin: 0;
}

p {
    margin: 0;
}


.container {
    max-width: 960px;
}

.main-container {
    max-width: 1140px;
}

.btn-primary,
.btn-primary:active,
.btn-primary:hover,
.btn-primary:visited {
    background-color: #1d86ff;
    color: #fff;
}

.btn-default,
.btn-primary,
.btn-outline-primary {
    transition: .2s all linear;
    border: 1px solid #1d86ff;
}

    .btn-primary:active,
    .btn-primary:hover,
    .btn-outline-primary:hover {
        border-color: #1d86ff;
        -webkit-transform: scale(1.05);
        -moz-transform: scale(1.05);
        transform: scale(1.05);
    }


/* ===== header css ===== */
header {
    background: #fff;
}

.mobile-header {
    display: none;
}

.top-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 8.2rem;
}
/* ===== login  css ===== */
.login-wrap {
    position: relative;
}

.login-btn {
    font-size: 2rem;
    font-weight: 600;
    color: #1D86FF;
    border: 1px solid #1D86FF;
    border-radius: .25rem;
    position: relative;
    padding: .8rem 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 15.5rem;
}

    .login-btn::after {
        content: "";
        background: url(../resources/fonts/login-icn.svg) center no-repeat;
        width: 2rem;
        height: 2rem;
        display: inline-block;
        margin: 0 0 0 .7rem;
    }

.login-option {
    position: absolute;
    z-index: 1;
    background: #fff;
    border-radius: .25rem;
    box-shadow: 0 4px 8px rgb(0 0 0 / 11%);
    border: 1px solid rgba(0,0,0,0.1);
    top: 5rem;
    display: none;
    left: 0;
    right: 0;
}

    .login-option a {
        padding: 1rem 3rem 1rem 3rem;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        display: block;
        color: #181818;
        font-size: 2rem;
    }

        .login-option a:hover {
            color: #1D86FF;
        }

        .login-option a:last-child {
            border: 0;
        }
/* ===== banner css ===== */

.banner-wrap {
    background: #EBF4FF;
    padding: 0;
    position: relative;
}

.banner-logo {
    display: inline-block;
    position: absolute;
    top: 3rem;
    left: 1.5rem;
}

.carousel-indicators li {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 0.8rem;
    background-color: #A8A8A8;
    opacity: 1;
    border: 0;
    transition: width .6s ease;
}

.carousel-indicators .active {
    width: 2rem;
    background-color: #727272;
}

.banner-content-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 8rem 0 0;
    min-height: 24rem;
}

.banner-content {
    padding: 0;
}

    .banner-content h5 {
        font-size: 7.6rem;
        color: #1B1B1D;
        font-weight: 600;
        line-height: 6rem;
        font-family: 'Open Sans', sans-serif;
    }

    .banner-content span {
        font-size: 4.8rem;
        font-weight: 300;
    }

.banner-img {
    margin: 0 0 0 6rem;
    width: 30rem;
    position: absolute;
    right: 10%;
    top: 0;
}

.wallet-img {
    width: 25rem;
}

.btn-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0 3rem 0;
}

    .btn-container a {
        font-size: 2.8rem;
        font-weight: 600;
        min-width: 24rem;
        padding: 0.82rem 0;
    }



a.recharge-btn:hover {
    background-color: transparent;
    color: #1D86FF;
}

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


/* ===== fees charge css ===== */
.fees-charge-wrap {
    padding: 3.2rem 0;
}

.title-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 3.2rem;
}

.title-img {
    margin: 0 5rem 0 0;
}

.fees-title {
    color: #1D86FF;
}

.arrow-icn {
    background: url(../resources/fonts/blue-arrow.svg) center no-repeat;
    width: 2.1rem;
    height: 3.5rem;
    display: inline-block;
    transition: all 0.3s ease;
    position: relative;
    top: 0.5rem;
    margin: 0 0 0 .5rem;
}

.find-ans-wrap {
    background: #fff;
    border-radius: .8rem;
    padding: 1.6rem 3.2rem 0.8rem;
}

.ans-title {
    color: #1D86FF;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .ans-title:hover {
        color: #1D86FF;
    }

        .ans-title:hover .arrow-icn,
        .fees-title:hover .arrow-icn {
            -webkit-transform: translateX(1rem);
            -moz-transform: translateX(1rem);
            transform: translateX(1rem);
        }

/* ===== accrodian css ====== */


.accordian > ul > li {
    border-bottom: 1px solid #DEDEDE;
    overflow: hidden;
}

.accordian ul > li:last-child {
    border-bottom: 0;
}

.accordion {
    margin: 0.8rem 0 0;
}

.accordian ul a {
    margin: 0.5rem 0 0;
    font-weight: 600;
}

.accordian h3 {
    font-size: 2.4rem;
    color: #1B1B1D;
    font-weight: 600;
    margin: 0;
    padding: 2rem 2.5rem 2rem 0;
    cursor: pointer;
    position: relative;
    line-height: 1.4;
}

    .accordian h3::after {
        content: "";
        position: absolute;
        width: 2rem;
        top: 3.1rem;
        right: 0;
        height: 1.1rem;
        background: url(../resources/fonts/accordian-icn.svg) center no-repeat;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        transition: all 0.5s;
    }

    .accordian h3.closed::after {
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        transform: rotate(180deg);
    }

.accrdn-content {
    display: none;
    height: 100%;
    padding: 0 2rem 1.6rem 0;
    font-size: 1.6rem;
    width: 100%;
    margin: 0 0 1rem;
}


    .accrdn-content h4 {
        color: #1B1B1D;
        font-weight: 600;
        font-size: 1.6rem;
        margin: 0 0 1rem;
    }

    .accrdn-content ul,
    .accrdn-content ol {
        margin: 0 0 0 2rem;
    }

        .accrdn-content ul > li,
        .accrdn-content ol > li {
            position: relative;
            margin: 1rem 0;
            padding: 0;
            list-style: square;
        }

        .accrdn-content ol > li {
            list-style: decimal;
        }

    .accrdn-content p {
        margin: 0 0 .5rem;
    }

        .accrdn-content p:last-child {
            margin: 0;
        }

    .accrdn-content li:last-child {
        margin-bottom: 0;
    }

    .accrdn-content li:first-child {
        margin-top: 0;
    }


    .accrdn-content ul > li > ul {
        margin: 1rem 0 0 2rem;
    }

        .accrdn-content ul > li > ul li {
            list-style: disc;
        }

/* ===== contact css ===== */
.contact-us {
    padding: 1rem 0 0;
}



.contact-us-wrap {
    display: flex;
    margin: 1.5rem 0 3rem;
    align-items: stretch;
}

    .contact-us-wrap li {
        padding: 0 5rem;
        position: relative;
        display: flex;
        align-items: flex-start;
        max-width: 37rem;
    }

        .contact-us-wrap li:first-child {
            padding-left: 0;
        }

        .contact-us-wrap li:last-child {
            padding-right: 0;
        }

        .contact-us-wrap li::after {
            content: "";
            width: 1px;
            height: 100%;
            background: #D8D8D8;
            position: absolute;
            top: 0;
            right: 0;
        }

        .contact-us-wrap li:last-child::after {
            width: 0;
            background: transparent;
        }

.contact-icn {
    margin: 0 1rem 0 0;
}

.info-details h4,
.info-details h4 a {
    font-size: 2.4rem;
    color: #1B1B1D;
    font-weight: 400;
}

.missed-call-wrap h4 a {
    color: #1D86FF;
}

.info-details p {
    font-size: 1.4rem;
    color: #5A5A5A;
    font-weight: 400;
}


.car-img {
    width: 38.6rem;
}

    .car-img.in-view {
        display: block;
    }

/* ===== footer css ===== */
.footer {
    background: #025296;
    padding: 2.4rem 0;
}

.footer-nav {
    display: flex;
    align-items: center;
}

    .footer-nav li {
        position: relative;
    }

        .footer-nav li::after {
            content: "";
            width: 1px;
            height: 14px;
            background: #fff;
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            right: 0;
        }

        .footer-nav li:last-child::after {
            width: 0;
            background: transparent;
        }

        .footer-nav li a {
            font-size: 1.2rem;
            color: #F3F3F3;
            padding: 0 2rem;
        }

            .footer-nav li a:hover {
                color: #ccc;
            }

.copyright-txt {
    font-size: 1.2rem;
    color: #cccfd6;
}


/* ====== Find your answer ====== */
.logo-wrap {
    display: flex;
}

.secondary-logo {
    width: 30.8rem;
    margin: 0 0 0 5rem;
}

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

.breadcrumb {
    background: transparent;
    padding: 0;
}

.breadcrumb-item a,
.breadcrumb-item.active {
    font-size: 1.4rem;
    font-weight: 600;
}

.breadcrumb-item.active {
    color: #AAAAAA;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: #BFBFBF;
}

.search-ans {
    margin: 1.5rem 0;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
}

    .search-ans input {
        width: 100%;
        height: 6rem;
        border: 1px solid #9A9A9A;
        border-radius: 0.5rem;
        padding: 0 8rem 0 2.4rem;
        font-size: 2rem;
        font-weight: 300;
        transition: all 0.3s ease;
        background: #fff;
    }

        .search-ans input:focus {
            border-color: #1D86FF;
            background-color: #fafafa;
        }

.search-icn {
    position: absolute;
    right: 3rem;
    cursor: pointer;
    background: transparent;
    border: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

    .search-icn:focus {
        outline: none;
    }

.inner-title {
    font-size: 2.4rem;
    font-weight: 600;
    color: #1B1B1D;
    border-bottom: 1px solid #DEDEDE;
    padding: 1.6rem 0;
}

.find-ans-accrod h3 {
    font-size: 2.2rem;
    font-weight: 400;
}

.find-ans-card {
    margin: 0 0 1rem;
}

/* ====== Fees and  charges css ====== */
.fast-accnt-wrapper {
    background: #EBF4FF;
    padding: 2.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1.5rem 0 0;
}

.fast-left-offer h3 {
    font-size: 3.2rem;
    font-weight: 300;
    margin: 0 0 2rem;
}

    .fast-left-offer h3 strong {
        font-weight: 700;
    }

.fast-left-offer a {
    font-size: 2rem;
    font-weight: 600;
    height: 4.4rem;
    padding: 0 3rem;
    line-height: 4rem;
}

.white-bg {
    background: #fff;
    border-radius: 0.8rem;
    padding: 2.4rem;
    margin: 1.5rem 0;
}

.white-bg-pb {
    padding-bottom: 0.8rem;
}

.charges-row {
    display: flex;
    align-items: center;
    margin: 1.6rem 0 0;
}

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

.charges-column h4 {
    font-size: 1.6rem;
    color: #181818;
    font-weight: 600;
    margin: 0 0 1rem;
}

.charges-column ul {
    display: flex;
    justify-content: space-between;
}

    .charges-column ul li {
        margin: 0 1.5rem 0 0;
    }

    .charges-column ul h5 {
        font-size: 1.6rem;
        font-weight: 300;
        color: #181818;
    }

    .charges-column ul p {
        font-size: 1.2rem;
        color: #5A5A5A;
        display: flex;
        align-items: center;
    }

        .charges-column ul p strong {
            font-size: 2.4rem;
            color: #181818;
            font-weight: 400;
        }

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

.other {
    flex: 0 0 calc(30% - 7rem);
}

.fasttag-fees-wrap {
    margin: 2rem 0 0;
}

    .fasttag-fees-wrap .table {
        margin: 0;
    }

        .fasttag-fees-wrap .table th {
            border-top: 0;
            border-bottom: 1px solid #DEDEDE;
            font-size: 1.6rem;
            font-weight: 600;
            padding: 0 0 1rem;
        }

        .fasttag-fees-wrap .table td {
            border-color: #DEDEDE;
            padding: 1.6rem 0;
            font-size: 2.4rem;
            color: #181818;
            font-weight: 500;
        }

            .fasttag-fees-wrap .table td h4 {
                font-size: 2.4rem;
                color: #181818;
                margin: 0;
            }

            .fasttag-fees-wrap .table td p {
                font-size: 1.4rem;
                color: #5A5A5A;
            }

/* ======== term of use ======== */
.term-use-title {
    position: relative;
    cursor: pointer;
}

.term-use {
    display: none;
    padding: 0 0 0 1.7rem;
}


.term-use-title::after {
    content: "";
    position: absolute;
    width: 2rem;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0;
    height: 1.2rem;
    background: url(../resources/fonts/accordian-icn.svg) center no-repeat;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

.term-use-title.closed::after {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}

.term-use li {
    margin: 1rem 0;
    font-size: 1.4rem;
    font-weight: 500;
    color: #313131;
    padding: 0 0 0 0.5rem;
}



/*============ banner slider animation ===============*/

.caption-animate .carousel-item.active .banner-content {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

    .caption-animate .carousel-item.active .banner-content .infinite {
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
    }

    .caption-animate .carousel-item.active .banner-content .hinge {
        -webkit-animation-duration: 2s;
        animation-duration: 2s;
    }

    .caption-animate .carousel-item.active .banner-content .flipOutX,
    .caption-animate .carousel-item.active .banner-content .flipOutY,
    .caption-animate .carousel-item.active .banner-content .bounceIn,
    .caption-animate .carousel-item.active .banner-content .bounceOut {
        -webkit-animation-duration: .75s;
        animation-duration: .75s;
    }

.caption-animate .carousel-item .banner-content.fadeIn,
.caption-animate .carousel-item .banner-content.fadeInDown,
.caption-animate .carousel-item .banner-content.fadeInDownBig,
.caption-animate .carousel-item .banner-content.fadeInLeft,
.caption-animate .carousel-item .banner-content.fadeInLeftBig,
.caption-animate .carousel-item .banner-content.fadeInRight,
.caption-animate .carousel-item .banner-content.fadeInRightBig,
.caption-animate .carousel-item .banner-content.fadeInUp,
.caption-animate .carousel-item .banner-content.fadeInUpBig {
    opacity: 0;
}


.highlight {
    background-color: yellow;
}