@media only screen and (min-width: 320px) and (max-width: 479px) {
    
    #hero .qt-container {
        padding-top: 80px;
        padding-bottom: 60px;
        background-image: url(../assets/img/payment-options/media-bg.svg), url(../assets/img/product/arrows.svg);
        background-size: 45px 45px, auto 15px;
        background-position: 94% 4%, 7% 85%;
        background-repeat: no-repeat;
    }    
    /* pricing table */
    #pricing-section .qt-container {
        padding-top: 30px;
        padding-bottom: 80px;
    }
    
    #pricing-section .qt-container .pricing-body-left {
        flex: 100%;
        width: 100%;
    }
    
    #pricing-section .qt-container .pricing-body-left .title {
        font-weight: 500;
        font-size: 1.2rem;
        margin-bottom: 18px;
    }

    #pricing-section .pricing-table {
        padding-top: 30px; 
    }
    
    
    #pricing-section .pricing-table > table tr th {
        font-size: 0.75rem;
        line-height: 18px;
        padding: 2px;
    }
    
    #pricing-section .pricing-table > table tr th:not(:first-child) {
       width: 60px;
    }
    
    #pricing-section .pricing-table > table tr td {
        background-color: var(--main-bg);
    }
    
    
    #pricing-section .pricing-table > table tr td {
        padding: 2px;
        font-size: 0.75rem;
        line-height: 18px;
    }
    
    #pricing-section .pricing-table > table tr td:first-child {
        font-weight: 0.75rem;
    }
    
    #pricing-section .pricing-table > table tr td:first-child::before {
        content: '';
        display: inline-block;
        background: url(../assets/img/product/checkmark.svg) no-repeat;
        background-size: contain;
        width: 10px;
        height: 10px;
        margin-right: 15px;
    }
    
    #pricing-section .pricing-body-right {
        flex: 100%;
        margin-top: 20px;
    }
    
    #pricing-section .pricing-body-right .body {
        padding: 45px;
    }
    
    #pricing-section .pricing-body-right .body > .title {
         color: #ffffff;
        text-align: center;
        font-weight: 500;
        font-size: 1.25rem;
        margin-bottom: 18px;
    }
    
    #pricing-section .pricing-body-right .body > .sub-title {
        color: rgba(255, 255, 255, 0.85);
        text-align: center;
        font-size: 0.9rem;
    }
    
    #pricing-section .pricing-body-right .body > .description {
        margin-top: 15px;
        color: rgba(255, 255, 255, 0.6);
        font-weight: 300;
        text-align: center;
        font-size: 0.75rem;
    }
    
    #pricing-section .pricing-body-right .body > .description::after {
       background-color: rgba(255, 255, 255, 0.1);
    }
    
    #pricing-section .pricing-body-right .body > .features {
        display: flex;
        justify-content: space-between;
        margin-top: 51px;
    }
    
    #pricing-section .pricing-body-right .body > .features  p {
        color: #ffffff;
        font-size: 0.9rem;
        text-align: center;
    }
    
    #pricing-section .pricing-body-right .body > .features  p:first-child {
        margin-bottom: 28px;
    }
    
    #pricing-section .qt-container .pricing-body-right .footer {
        background-color: var(--light-blue);
    }
    
    #pricing-section .pricing-body-right .footer > .link {
        padding: 25px;
        display: flex;
        /* align-items: center; */
        justify-content: center;
        color: var(--blue);
        font-size: 0.9rem;
        font-weight: 500;
        text-decoration: none;
        border-radius: 0px 0px 6px 6px;
        width: 100%;
    }
    
    #pricing-section .pricing-body-right .footer > .link::after {
        content: url(../assets/img/product/arrow-left.svg);
        margin-left: 10px;
        /* display: inline-flex; */
        width: 18px;
        height: 18px;
        vertical-align: middle;
    }
    
    /* Pricing features     */
    #pricing-features > .qt-container {
        padding-top: 50px;
        background-size: 80px 80px, auto 20px;
        background-position: 98% 13%, 7% 75%;
    }

    #pricing-features .qt-container .sub-title {
        line-height: 20px;
        color: var(--dark-grey);
        padding: 0px;
    }
    
    #pricing-features .qt-container > .features {
        padding-top: 60px;
    }
       
    .qt-container .features > .container .feature-row {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: space-between;
    }
    
    .qt-container .features > .container .feature-row:nth-child(2) {
      margin-top: 20px;
    }
    
    .qt-container .features > .container .feature-column {
        padding: 20px 30px 35px;
        flex: 100%;
        margin-bottom: 20px;
        margin-right: 0px;
    }

    .qt-container .features > .container .feature-column:last-of-type {
        margin-bottom: 0px;
    }

    #customers-section > .qt-container {
        padding: 0px 15px;
    }
    
    #customers-section .text-section {
        flex: 100%;
        width: 100%;
    }

    #customers-section .img-section {
        flex: 100%;
        width: 100%;
        margin-top: 80px;
    }

    #customers-section .img-section > .row {
        justify-content: flex-start;
    }
    
    #customers-section .img-section > .row:not(:last-child) {
        margin-bottom: 45px;
    }
    
    #customers-section .img-section > .row  > img {
        height: 20px;
    }
    
    #customers-section .img-section > .row  > img:not(:last-child) {
        margin-right: 15px;
    }

    #faq-section {
        background-color: #f8fafc;
        padding: 190px 0px 100px;
    }

    /* Faqs sections */
    #faq-section {
       padding: 0 15px;
    }

    #faq-section > .qt-container {
        padding: 60px 0px;
    }
    
    #faq-section .text-section {
        flex: 100%;
        width: 100%;
    }
    
    #faq-section .text-section > .title {
        font-size: 2.5rem;
        width: 443px;
        max-width: 100%;
    }
    
    #faq-section .text-section > .title::after {
        display: none;
    }
    
    #faq-section .faqs {
        flex: 100%;
        width: 100%;
        margin-top: 50px;
    }
        

}

/*------- Tablets ------*/
/* ========================= */

@media only screen and (max-width: 991px) and (min-width: 768px) {

    #pricing-section .qt-container .pricing-body-left {
        flex: 100%;
    }
    /* #pricing-section .qt-container .pricing-body-left .description {
        margin: 0 20px;
    } */

    #pricing-section .pricing-body-right {
        margin-top: 0px;
    }

    #pricing-section .pricing-body-right .body > .features {
        justify-content: space-evenly;
    }

    .qt-container .features > .container .feature-column {
        padding: 15px 20px 30px;
    }

    #pricing-features .qt-container .sub-title  {
        padding: 0 120px;
    }

    #customers-section > .qt-container {
        padding: 0px 30px;
    }
    
    #customers-section .text-section {
        flex: 2;
        width: 100%;
        margin-right: 20px;
    }

    #customers-section .img-section {
        flex: 1;
    }

    #customers-section .img-section > .row {
        justify-content: flex-end;
    }
    
    #customers-section .img-section > .row:not(:last-child) {
        margin-bottom: 40px;
    }
    
    #customers-section .img-section > .row  > img {
        height: 25px;
    }
    
    #customers-section .img-section > .row  > img:not(:last-child) {
        margin-right: 30px;
    }

    /* Faqs sections */
    #faq-section {
        padding: 0px 30px;
    }

    #faq-section > .qt-container {
        padding: 60px 0px;
    }
    
    #faq-section .text-section {
        flex: 1;
        width: 100%;
    }
    
    #faq-section .text-section > .title {
        font-size: 2rem;
        width: 303px;
        max-width: 100%;
    }
    
    #faq-section .text-section > .title::after {
        content: '';
        display: block;
        background: url(../assets/img/product/scribble.svg) no-repeat;
        background-size: contain;
        height: 100px;
        width: 60px;
        position: absolute;
        top: 100%;
        right: 15%;
    }
    
    #faq-section .faqs {
        flex: 1;
        width: 100%;
        margin-top: 50px;
    }
    
}

/*------- Low res laptops------*/
/* ========================= */

@media only screen and (min-width: 1441px) and (max-width: 2559px) {

    #pricing-section .pricing-table > table {
        margin: auto;
        width: 90%; 
    }

}

/*------- Lorger screens------*/
/* ========================= */

@media only screen and (min-width: 2560px) {
    html {
      font-size: 18px;
    }
    
    .qt-container {
        padding: 0px 600px;
        width: 100%;
    }
}