/* Section with Image */
.section-img {
    padding: 5rem 0;
    border-bottom: 1px solid #ddd;
}

    .section-img .row {
        align-items: center;
        display: block;
    }

    .section-img img {
        width: 100%;
        height: auto;
    }

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
}

.section-img-text h3 {
    color: #87c543;
}

h1::after {
    content: '—';
    display: block;
}

/* Section with Icon */
.section-icon {
    padding: 3rem 0;
    border-bottom: 1px solid #ddd;
}

    .section-icon .col-md-2 {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .section-icon img {
        width: 80px;
        height: auto;
    }

.section-icon-text p {
    margin: 0;
}

.section-icon-text h1,
.section-icon-text h2,
.section-icon-text h3,
.section-icon-text h4,
.section-icon-text h5,
.section-icon-text h6 {
    font-weight: 700;
    margin-top: 0.5rem;
}

.section-icon-text h3 {
    color: #87c543;
}



/* Testimonials Section */
.shadow-box {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 7px 21px 0 rgba(0,0,0,.1);
    margin-bottom: 1.5rem;
    transition: all 0.3s;
}

    .shadow-box:hover {
        box-shadow: 0 14px 42px 0 rgba(0,0,0,.1);
    }

    .shadow-box img {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    .shadow-box iframe {
        width: 100%;
        height: 300px;
        object-fit: cover;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

.card-body {
    padding: 1.5rem;
    font-size: 16px;
}

.card-footer {
    padding: 1.5rem;
    border-top: 1px solid #ddd;
    background: rgba(0,0,0,.04);
}

.section-testimonial .card-body {
    font-style: italic;
}

.section-testimonial {
    background-color: #f6f8f2;
    padding: 3rem 0 5rem 0;
    border-bottom: 1px solid #ddd;
}

    .section-testimonial h3 {
        color: #87c543;
        margin-bottom: 4rem;
        font-weight: 700;
        text-align: center;
    }

        .section-testimonial h3::after {
            content: '—';
            display: block;
        }

    .section-testimonial .row {
        display: block;
    }

    .section-steps h5 {
        font-weight: 400;
        margin-bottom: 4rem;
    }



/* Steps Section */
.steps-section {
    padding: 3rem 0 5rem 0;
    border-bottom: 1px solid #ddd;
}

    .steps-section h3 {
        font-weight: 700;
        color: #333;
        text-align: center;
    }

        .steps-section h3::after {
            content: '—';
            display: block;
        }

    .steps-section .row {
        display: flex;
        margin-top: 3rem;
    }

    .steps-section .col-md-2dot4 {
        text-align: center;
        margin-bottom: 1rem;
    }

    .steps-section .step-icon {
        position: relative;
        margin: 1rem auto;
        box-sizing: border-box;
        width: 120px;
        height: 120px;
        margin-bottom: 2rem;
    }

        .steps-section .step-icon::after {
            position: absolute;
            background-color: #87c543;
            color: #fff;
            padding: 0.3rem 0.9rem;
            border-radius: 50%;
            font-weight: 700;
            top: -1rem;
            left: -1rem;
            box-shadow: 0.2rem 0.2rem 1rem rgba(0,0,0,.4);
        }

.steps-container {
    margin-bottom: 2rem;
}

.steps-section .steps-container:nth-child(1) .step-icon {
    background: url('../images/shop/icon_connect.png');
    background-size: cover;
}

    .steps-section .steps-container:nth-child(1) .step-icon::after {
        content: '1';
    }

.steps-section .steps-container:nth-child(2) .step-icon {
    background: url('../images/shop/icon_swish.png');
    background-size: cover;
}

    .steps-section .steps-container:nth-child(2) .step-icon::after {
        content: '2';
    }

.steps-section .steps-container:nth-child(3) .step-icon {
    background: url('../images/shop/icon_tablet.png');
    background-size: cover;
}

    .steps-section .steps-container:nth-child(3) .step-icon::after {
        content: '3';
    }

.steps-section .steps-container:nth-child(4) .step-icon {
    background: url('../images/shop/icon_sign.png');
    background-size: cover;
}

    .steps-section .steps-container:nth-child(4) .step-icon::after {
        content: '4';
    }

.steps-section .steps-container:nth-child(5) .step-icon {
    background: url('../images/shop/icon_fee.png');
    background-size: cover;
}

    .steps-section .steps-container:nth-child(5) .step-icon::after {
        content: '5';
    }


@media (max-width:768px) {
    .steps-section .row {
        flex-direction: column;
    }
}

/* Methods Section */
.section-pmethods {
    padding: 3rem 0;
}

    .section-pmethods h3 {
        font-weight: 700;
        color: #333;
        text-align: center;
    }

    .section-pmethods h3::after {
        content: '—';
        display: block;
    }

    .section-pmethods p {
        text-align: center;
    }

    .section-pmethods .row {
        display: flex;
        align-items: center;
    }

    .section-pmethods .col-md-3 {
        padding: 1rem;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .section-pmethods img {
        width: 80%;
        height: auto;
        transition: all 0.3s;
        /*opacity: 0.5;
        filter: grayscale(100%);*/
        opacity: 0.7;
    }

    .section-pmethods .col-md-3:hover img {
        opacity: 1;
        /*filter: grayscale(0%);*/
    }


/* Phone Screens CSS */
.screen {
    padding: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

    .screen img {
        height: auto;
        width: 80%;
        border-radius: 50px;
        border: 1.5rem solid #f6f8f2;
        box-shadow: 0 0 5rem rgba(0,0,0,.08);
    }


/* Icon */
.icon {
    margin: 0.8rem 1rem;
    color: #87c543;
    font-size: 1.6rem;
}

/* Map Embeding */
.map-embed {
    padding: 0;
}

    .map-embed iframe {
        width: 100%;
        height: 600px;
    }


/* Table */
.table h3 {
    margin: 0 !important;
}

.table {
    font-size: 12px;
    width: 100%;
}

    .table th, .table td {
        text-align: right;
    }

.tr-row {
    border-top: 1px solid #ddd;
    height: 7rem;
}

.table > tbody > tr > td {
    border-top: none;
    vertical-align: middle;
}

.displaynone {
    display: none;
}

.link {
    color: #87c543 !important;
}

.tr-row:nth-child(even) {
    background-color: #f6f8f2;
}

.table a {
    color: #333;
}

.table thead tr {
    background-color: #87c543;
    color: #fff;
    font-size: 14px;
    position: sticky;
}

.table-wrap {
    margin: 0 -1.5rem;
    margin-top: 2rem;
}


/* Consumer Steps Section */
.section-steps {
    background-color: #f6f8f2;
    padding: 3rem 0 2rem 0;
    border-bottom: 1px solid #ddd;
}

    .section-steps .screen {
        padding: 2rem;
        margin-bottom: 2rem;
    }

        .section-steps .screen img {
            width: 85%;
            border-radius: 25px;
            border: 1rem solid #f6f8f2;
            box-shadow: 0 0 5rem rgba(0,0,0,.08);
        }

    .section-steps .step-text::before {
        background-color: #87c543;
        color: #fff;
        padding: 0.35rem 0.85rem;
        border-radius: 50%;
        font-weight: 700;
        box-shadow: 0 0 2rem rgba(0,0,0,.3);
        margin-right: 2.5rem;
        height: 100%;
        content: attr(data-content);
    }

    .section-steps .step-text {
        display: flex;
    }

    .section-steps .row {
        display: block;
    }

    .screen .screen-text {
        padding: 0 2rem;
        font-weight: 400;
        margin-bottom: 1.5rem;
    }


.screen-text h4 {
    font-weight: 600;
    font-size: 1.6rem;
}


/* Panel CSS */
.panel h4 a:hover {
    text-decoration: none;
}

.panel h4 {
    font-weight: 600;
}

    .panel h4 .fas {
        margin-right: 1rem;
    }

.panel-heading {
    padding: 2.5rem 1.5rem;
    background-color: #fff !important;
}

/* Form CSS */
form {
    padding: 0 1.5rem 4rem 1.5rem;
}

    form label {
        font-weight: 400;
    }

    form h3 {
        margin-top: 0;
        margin-bottom: 2rem;
    }

    form .btn-success {
        margin-top: 2rem;
        border: none !important;
        transition: all 0.3s;
        width: 100%;
        font-weight: 700;
        padding: 1.2rem 0;
        border-radius: 20px;
    }


@media (max-width:768px) {
    form {
        padding: 0;
    }
}

.col-2dot4,
.col-sm-2dot4,
.col-md-2dot4,
.col-lg-2dot4,
.col-xl-2dot4 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-2dot4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}

@media (min-width: 540px) {
    .col-sm-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media (min-width: 720px) {
    .col-md-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media (min-width: 960px) {
    .col-lg-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media (min-width: 1140px) {
    .col-xl-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }
}