@media only screen and (min-width: 320px) and (max-width: 479px) {
    /* demo css */
    #support {
        padding: 0px 15px;
    }

    #support .qt-container {
        padding: 60px 0px;
        background-size: 42px 42px, auto 10px;
        background-position: 100% 0%, 0% 25%;
        background-repeat: no-repeat;
    }
    
    #support .qt-container > .text-section {
        text-align: center;
    }
    
    #support .qt-container .text-section > .title {
        font-size: 2rem;
        margin-bottom: 10px;
        width: 100%;
        margin: 0 auto;
    }

    #support .qt-container .text-section > .sub-title {
        font-size: 0.9rem;
        margin: 20px auto;
        padding: 0px;
    }   
    
    #support .cards-section {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 80px auto 0px;
    }
    
    #support .cards-section > .card {
        margin-right: 0px;
        margin-bottom: 20px;
        flex: 100%;
        max-width: 100%;
    }
    
    #support .cards-section > .card:last-child {
        margin-bottom: 0px;
    }

    #support .cards-section > .card > .sub-title {
        margin-top: 15px;
    }

    #support .cards-section > .card > .description {
        line-height: 20px;
        font-size: 0.9rem;
        margin-bottom: 5px;
    }

    /* -- support --  */
    #support .qt-container > .container {
        margin: 0 auto;
        width: 100%;
    }

    #support .qt-container > .container .contact-form-section {
        padding: 20px 15px;
        margin-right: 0px;
    }

    #support .qt-container > .container .contact-form-section > .contact-form .form-row {
        display: block;
        margin-bottom: 20px;
    }

    #support .qt-container > .container .contact-form-section > .contact-form .submit-btn{
        width: 100%;
    }

    label {
        display: block;
        margin-bottom: 10px;
        font-weight: 500;
    }

    input {
        display: block;
        border: 1px solid rgba(159, 166, 170, 0.4);
        padding: 10px 15px;
        width: 100%;
        border-radius: 5px;
        font-family: 'cera_pro', Arial, Helvetica, sans-serif;
        color: var(--dark);
    }

    input::placeholder {
        font-family: 'cera_pro', Arial, Helvetica, sans-serif;
        font-size: 0.9rem;
        color: rgba(2, 4, 16, 0.4);
    }

    input:focus {
        border: 0.5px solid var(--blue);
    }

    textarea {
        border: 1px solid rgba(159, 166, 170, 0.4);
        width: 100%;
        padding: 15px;
        border-radius: 5px;
        font-family: 'cera_pro', Arial, Helvetica, sans-serif;
        color: var(--dark);
    }

    textarea::placeholder {
        font-family: 'cera_pro', Arial, Helvetica, sans-serif;
        font-size: 0.9rem !important;
        color: rgba(2, 4, 16, 0.4);
    }

    /* Faqs sections */
    #faq-section {
        background-color: var(--main-bg);
        padding: 190px 0px 100px;
    }

    #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) {
    #support .cards-section > .card {
        padding: 50px 8px 40px;
    }

    #support .cards-section {
        width: 90%;
    }

    #support .cards-section > .card > .description {
        padding: 15px 10px;
    }


}

/*------- Low res laptop ------*/
/* ========================= */

@media only screen and (min-width: 992px) and (max-width: 1440px) {

    #support .cards-section > .card {
        padding: 50px 8px 40px;
    }

    #support .cards-section > .card > .description {
        padding: 10px 80px;
    }
    
}

/*-------Mid-size screens------*/
/* ========================= */

@media only screen and (min-width: 1441px) and (max-width: 2559px) {
    html {
      font-size: 16px;
    }
    
    .qt-container {
        padding: 0px 100px;
        width: 100%;
    }
}