/* ======================== MOBILE RESPONSIVE DESIGN ======================== */

/* ======================== IMAGE HEADER ======================== */
@media screen and (max-width: 480px) {
    .Payment-channels-image-section {
        height: 30vh;
    }
    
    .card {
        margin-top: 5%;
    }
    
    .Payment-channels-text-overlay h1 {
        font-size: 28px;
    }

    .information-section-title h1 {
        font-size: 22px;
    }
}

/* ======================== OVER THE COUNTER SECTION ======================== */
@media (max-width: 1200px) {
    .payment-center {
        padding: 0 10% 3% 10%;
    }
}

@media (max-width: 992px) {
    .payment-center-section h1 {
        font-size: 36px;
    }

    .payment-center-section h2 {
        font-size: 28px;
    }

    .payment-center-section ul,
    .payment-center-section li {
        font-size: 24px;
    }

    .online-payment-mobile {
        padding: 0 5% 3% 5%;
    }

    .information-section-content-step-context {
        padding: 0 0 0 10%;
    }
}

@media (max-width: 768px) {
    .payment-center-section h1 {
        font-size: 32px;
    }

    .payment-center-section h2 {
        font-size: 24px;
    }

    .payment-center-section ul,
    .payment-center-section li {
        font-size: 20px;
    }

    .payment-center {
        padding: 0;
    }

    .information-section-content-step-context {
        padding: 0;
    }

    .dot {
        height: 40px;
        width: 40px;
        line-height: 40px;
        font-size: 18px;
    }
}

@media (max-width: 480px) {

    .fixed-image{
        width: 100px; 
        height: 100px; 
    }
    .not-fixed-image{
        visibility: hidden; 
        height: 0; 
    
        
    }
 
    .payment-center {
        margin: 0;
        padding: 3%;
    }

    .tab-pane{
        padding: 0;
    }

    .payment-center-section h1 {
        font-size: 22px;
    }

    .payment-center-section h2 {
        font-size: 20px;
    }

    .payment-center-section ul,
    .payment-center-section li {
        font-size: 16px;
        font-weight: lighter;
        
    }

    .tab-title, .tab-title-name {
        padding: 0;
    }
    .dot {
        height: 30px;
        width: 30px;
        line-height: 30px;
        font-size: 14px;
    }

 

    .content-grid {
        margin: 0;
        padding: 3%;
    }

    .information-section-content-step-context li{
        font-weight: bold;
    }

    .information-section-content-step-context-unlisted ul {
        padding-left:  70%;
        line-height: 2.5;
    }
    .content-grid{
        overflow: auto;
        white-space: nowrap;
    }
}


/* =============================== contacts =================================== */

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


    .payment-contacts h2 {
        font-size: large;
    }

    .contacts-margin h2 {
        font-size: large;
    }

    .row {
        padding-right: 0 !important;
    }
 
    .contacts-margin {
        margin-bottom: 10%;
    }
    .contacts-margin {
        padding: 0 10%;
    }


    .contact-card h2{
        font-size: x-large;
    }

    .payment-contacts p{
        font-weight: lighter;
    }

}