/* ======================== 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) {
    .over-the-counter {
        padding: 0 10% 3% 10%;
    }
}

@media (max-width: 992px) {
    .over-the-counter-section h1 {
        font-size: 36px;
    }

    .over-the-counter-section h2 {
        font-size: 28px;
    }

    .over-the-counter-section ul,
    .over-the-counter-section li {
        font-size: 24px;
    }

    .over-the-counter {
        padding: 0 5% 3% 5%;
    }

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

@media (max-width: 768px) {
    .over-the-counter-section h1 {
        font-size: 32px;
    }

    .over-the-counter-section h2 {
        font-size: 24px;
    }

    .over-the-counter-section ul,
    .over-the-counter-section li {
        font-size: 20px;
    }

    .over-the-counter {
        padding: 0;
    }

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

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

@media (max-width: 480px) {


    .over-the-counter {
        margin: 0;
        padding: 3%;
    }

    .over-the-counter-section h1 {
        font-size: 22px;
    }

    .over-the-counter-section h2 {
        font-size: 20px;
    }

    .over-the-counter-section ul,
    .over-the-counter-section li {
        font-size: 16px;
        font-weight: lighter;
        
    }
    .over-the-counter-section ul{
        padding: 0 20px;
    }
    .dot {
        height: 30px;
        width: 30px;
        line-height: 30px;
        font-size: 14px;
    }

    .information-section-content-step{
        margin: 0;
        padding: 3%;
    }

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

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

    .information-section-content-step-context-unlisted ul {
        padding-left: 20%;
        line-height: 1.48;
    }
    .justify-content-center{
        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;
    }

}
}