/* =========================================
   ECOMMERCE - WHY US SECTION
========================================= */

.ecommerce-why-section {
    width: 100%;
    padding: 70px 0 80px;
    background: #ffffff;
}


/* =========================================
   SECTION HEADER
========================================= */

.ecommerce-why-header {
    margin: 0 auto;
}

.ecommerce-why-header h2 {
    margin: 0 0 25px;

    color: #000000;

    font-size: 42px;
    font-weight: 700;
    line-height: 1.25;
}

.ecommerce-why-header h2 span {
    display: block;
    margin-top: 5px;
}

.ecommerce-why-header p {
    margin: 0 auto;
    color: #111111;
    font-weight: 400;
}


.ecommerce-reasons-row {
    row-gap: 70px;
}


/* =========================================
   REASON ITEM
========================================= */

.ecommerce-reason-item {
    display: flex;
    align-items: flex-start;

    width: 100%;
}


/* =========================================
   IMAGE AREA
========================================= */

.ecommerce-reason-image {
    flex: 0 0 190px;

    width: 190px;
    height: 190px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-right: 25px;
}

.ecommerce-reason-image img {
    display: block;

    max-width: 180px;
    max-height: 180px;

    width: auto;
    height: auto;

    object-fit: contain;
}


/* =========================================
   CONTENT
========================================= */

.ecommerce-reason-content {
    flex: 1;
}

.ecommerce-reason-content h3 {
    margin: 0 0 8px;
    color: #000000;
    font-size: 27px;
    font-weight: 700;
    line-height: 1.3;
}

.ecommerce-reason-content p {
    margin: 0;
    color: #666666;
    font-weight: 400;
}


/* =========================================
   LARGE DESKTOP
========================================= */

@media (max-width: 1199px) {

    .ecommerce-why-header h2 {
        font-size: 38px;
    }

    .ecommerce-why-header p {
        font-size: 21px;
    }

    .ecommerce-reason-image {
        flex: 0 0 160px;

        width: 160px;
        height: 160px;

        margin-right: 20px;
    }

    .ecommerce-reason-image img {
        max-width: 150px;
        max-height: 150px;
    }

    .ecommerce-reason-content h3 {
        font-size: 24px;
    }

    .ecommerce-reason-content p {
        font-size: 18px;
    }
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .ecommerce-why-section {
        padding: 55px 0 65px;
    }

    .ecommerce-why-header h2 {
        font-size: 34px;
    }

    .ecommerce-why-header p {
        font-size: 19px;
        line-height: 1.5;
    }

    .ecommerce-zigzag {
        margin-bottom: 55px;
    }

    .ecommerce-reasons-row {
        row-gap: 55px;
    }

    .ecommerce-reason-image {
        flex: 0 0 150px;

        width: 150px;
        height: 150px;
    }

    .ecommerce-reason-image img {
        max-width: 140px;
        max-height: 140px;
    }

    .ecommerce-reason-content h3 {
        font-size: 23px;
    }

    .ecommerce-reason-content p {
        font-size: 17px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .ecommerce-why-section {
        padding: 45px 0 55px;
    }

    .ecommerce-why-header {
        padding: 0 15px;
    }

    .ecommerce-why-header h2 {
        font-size: 29px;
    }

    .ecommerce-why-header p {
        font-size: 17px;
        line-height: 1.6;
    }

    .ecommerce-zigzag {
        width: 250px;
        margin: 25px auto 45px;
    }

    .ecommerce-reasons-row {
        row-gap: 45px;
    }

    .ecommerce-reason-item {
        display: block;
        text-align: center;
    }

    .ecommerce-reason-image {
        width: 150px;
        height: 140px;

        margin: 0 auto 20px;
    }

    .ecommerce-reason-image img {
        max-width: 140px;
        max-height: 135px;
    }

    .ecommerce-reason-content h3 {
        font-size: 22px;
        margin-bottom: 10px;
    }

    .ecommerce-reason-content p {
        font-size: 16px;
        line-height: 1.6;
    }
}

        .section-title {
            margin: 0;
            text-align: center;
            font-size: clamp(32px, 3.1vw, 50px);
            line-height: 1.15;
            font-weight: 800;
        }

        /* =========================
           GRID
        ========================= */

        .benefits-row {
            row-gap: 60px;
        }

        .benefit-item {
            height: 100%;
        }

        /* =========================
           IMAGE PLACEHOLDER
        ========================= */

        .benefit-image {
            width: 150px;
            margin-bottom: 1rem;

            /*
                Intentionally blank.
                Add your image inside this div later.
            */
            background: transparent;
        }

        /* =========================
           TITLE
        ========================= */

        .benefit-title {
            font-size: 22px;
            line-height: 1.25;
            font-weight: 800;
            margin: 0 0 10px;
            max-width: 310px;
        }

        /* =========================
           DESCRIPTION
        ========================= */

        .benefit-text {
            margin: 0;
            color: #5a5a5a;
        }

        /* =========================
           DESKTOP
        ========================= */

        @media (min-width: 1200px) {

            .benefit-image {
                width: 100px;
            }
        }

        /* =========================
           TABLET
        ========================= */

        @media (max-width: 991px) {

            .benefit-image {
                width: 135px;
                height: 135px;
            }

            .benefit-title {
                font-size: 21px;
            }

            .benefit-text {
                font-size: 17px;
            }

            .benefits-row {
                row-gap: 50px;
            }
        }

        /* =========================
           MOBILE
        ========================= */

        @media (max-width: 575px) {

            .section-title {
                font-size: 30px;
            }

            .benefit-item {
                text-align: center;
            }

            .benefit-image {
                width: 125px;
                height: 125px;
            }

            .benefit-title {
                max-width: 100%;
                margin-left: auto;
                margin-right: auto;
                font-size: 23px;
            }

            .benefit-text {
                max-width: 100%;
                margin-left: auto;
                margin-right: auto;
                font-size: 16px;
            }
        }


        /* =====================================
   SHOPIFY SECTION
===================================== */

.shopify-section {
    background: #c9f2b1;
    padding: 65px 0 70px;
    position: relative;
    overflow: hidden;
}

.magento-section {
    background: #FCEAE2;
     padding: 65px 0 70px;
    position: relative;
    overflow: hidden;
}

.woocommerce-section {
    background: #FBDFF7;
     padding: 65px 0 70px;
    position: relative;
    overflow: hidden;
}

.prestashop-section {
    background: #F4FDFF;
    padding: 65px 0 70px;
    position: relative;
    overflow: hidden;
}

/* =====================================
   IMAGE PLACEHOLDER
===================================== */

.shopify-image-placeholder {
    width: 100%;
    background: transparent;
}


/* =====================================
   CONTENT
===================================== */

.shopify-content {
    padding-left: 25px;
    padding-top: 5px;
}


/* Small heading */

.shopify-subtitle {
    display: block;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 12px;
    color: #111;
}


/* Main heading */

.shopify-title {
    font-size: 40px;
    line-height: 1.18;
    font-weight: 800;
    margin: 0 0 18px;
    max-width: 720px;
    color: #080808;
}


/* Description */

.shopify-description {
    color: #333;
    margin: 0 0 30px;
}


/* =====================================
   FEATURES
===================================== */

.shopify-features {
    list-style: none;
    padding: 0;
    margin: 0 0 38px;
}

.shopify-features li {
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 700;

    margin-bottom: 1rem;
    color: #111;
}


/* Green check circle */

.check-icon {
    flex: 0 0 30px;

    width: 30px;
    height: 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #4e9630;
    color: #d9f8c9;
    font-size: 21px;
    font-weight: 900;
}

/* Orange check circle */

.check-icon-magento {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #F46424;
    color: #d9f8c9;
    font-size: 21px;
    font-weight: 900;
}

/* Magento check circle */

.check-icon-woocommerce {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background:  #945C8C;
    color: #fff;
    font-size: 21px;
    font-weight: 900;
}

/* prestashop check circle */

.check-icon-prestashop {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background:  #362e62;
    color: #fff;
    font-size: 21px;
    font-weight: 900;
}



/* =====================================
   QUOTE BUTTON
===================================== */

.quote-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 60px;
    padding: 0 35px;
    border-radius: 18px;
    background: linear-gradient(
        100deg,
        #4b8f2d,
        #8fc36e
    );
    color: #fff;
    text-decoration: none;
    font-size: 17px;
    font-weight: 800;
    transition: 0.3s ease;
}

.quote-btn:hover {
    color: #fff;
    transform: translateY(-2px);
}
.quote-btn-megento {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 60px;
    padding: 0 35px;
    border-radius: 18px;
    background-image: linear-gradient(96deg, #FF8149 0%, #F46424 100%);
    color: #fff;
    text-decoration: none;
    font-size: 17px;
    font-weight: 800;
    transition: 0.3s ease;
}

.quote-btn-woocommerce {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 60px;
    padding: 0 35px;
    border-radius: 18px;
   background-image: linear-gradient(96deg, #C65BB7 0%, #945C8C 100%);
    color: #fff;
    text-decoration: none;
    font-size: 17px;
    font-weight: 800;
    transition: 0.3s ease;
}

.quote-btn-prestashop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 60px;
    padding: 0 35px;
    border-radius: 18px;
    background-image: linear-gradient(96deg, #362E62 0%, #1C1737 100%);
    color: #fff;
    text-decoration: none;
    font-size: 17px;
    font-weight: 800;
    transition: 0.3s ease;
}


.quote-btn:hover {
    color: #fff;
    transform: translateY(-2px);
}
   

/* Button icon */

.quote-icon {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
}


/* =====================================
   BOOTSTRAP CONTAINER ADJUSTMENT
===================================== */

@media (min-width: 1400px) {

    .shopify-section .container {
        max-width: 1450px;
    }
}


/* =====================================
   TABLET
===================================== */

@media (max-width: 991px) {

    .shopify-section {
        padding: 70px 0 80px;
    }

    .shopify-image-placeholder {
        height: 420px;
    }

    .shopify-content {
        padding-left: 10px;
    }

    .shopify-title {
        font-size: 34px;
    }

    .shopify-description {
        font-size: 19px;
    }

    .shopify-features li {
        font-size: 17px;
    }

    .quote-btn {
        min-width: 290px;
        height: 68px;
    }
}


/* =====================================
   MOBILE
===================================== */

@media (max-width: 767px) {

    .shopify-section {
        padding: 50px 0 65px;
    }

    .shopify-image-placeholder {
        height: 280px;
    }

    .shopify-content {
        padding-left: 0;
    }

    .shopify-subtitle {
        font-size: 15px;
    }

    .shopify-title {
        font-size: 30px;
    }

    .shopify-description {
        font-size: 18px;
        line-height: 1.5;
    }

    .shopify-features li {
        align-items: flex-start;
        font-size: 16px;
        margin-bottom: 17px;
    }

    .check-icon {
        flex: 0 0 27px;
        width: 27px;
        height: 27px;
        font-size: 18px;
    }

    .quote-btn {
        width: 100%;
        min-width: 0;
        height: 65px;
    }
}