@media only screen and (max-width:400px) {
    .container {
        width: 300px !important
    }

    .sec-1
    {
        background: transparent;
    }
}

@media only screen and (min-width:400px) and (max-width:900px) {
    .container {
        width: 90vw
    }
}

@media only screen and (max-width:900px) {
    .noMobile.leftCol, .noMobile.centerCol, .noMobile.rightCol
    {
        display: none;
    }

    .mobile
    {
        display: block;
    }

    .headerPros {
        display: none
    }

    .header {
        margin: 0 auto;
        margin-top: 34px
    }

    .diseasesContainer {
        justify-content: center
    }

    .bothCol {
        flex-direction: column
    }

    .leftCol,
    .rightCol {
        width: 100% !important
    }

    .sec-7__img img {
        max-width: 80%
    }

    .circleProsContainer {
        flex-direction: column
    }

    .circlePro__img img {
        margin: 0 auto;
        display: block
    }

    .circlePro {
        width: 100%;
        margin-bottom: 30px
    }

    .orderPros {
        flex-wrap: wrap
    }

    .orderPro {
        width: 35%;
        margin: 10px
    }

    .orderProImg img {
        width: 100%
    }

    .dcertContainer {
        flex-direction: column
    }

    .dcert img {
        display: block;
        margin: 0 auto
    }

    .howToContainer {
        flex-direction: column
    }

    .howTo img {
        display: block;
        margin: 0 auto
    }

    .farrow {
        position: absolute;
        bottom: 17px;
        right: 47%;
        transform: rotate(90deg);
        top: unset
    }

    .howTo {
        position: relative
    }

    .howToDesc {
        padding-bottom: 90px
    }

    .sec-5__productImg {
        display: none
    }

    .buttonOrderContainer {
        text-align: center !important
    }

    .component {
        flex-direction: column-reverse !important;
        text-align: center
    }

    .componentArrow {
        display: none
    }

    .leftColFlex {
        flex-direction: column;
        text-align: justify
    }

    .personImg,
    .personName {
        margin: 0 auto;
        text-align: center
    }

    .sec-1__desc,
    .sec-1__header {
        width: 100%
    }

    .sec-1__header {
        padding: 0
    }

    .sec-1__listHeader {
        margin: 40px auto
    }

    h2 {
        font-size: 28px !important
    }

    .sec-5__desc {
        font-size: 20px
    }

    .orderProImg {
        width: 120px;
        height: 130px;
        margin: 0 auto;
    }

    .dcert {
        width: 200px;
        margin: 0 auto
    }
}

@media only screen and (min-width:900px) and (max-width:1200px) {
    .container {
        width: 80%
    }

    .sec-3 .leftCol,
    .sec-3 .rightCol {
        width: 50%;
    }

    .sec-7__img img {
        max-width: 470px;
    }

    .sec-1__header,
    .sec-1__desc {
        width: 100%;
    }

    .orderPros {
        flex-wrap: wrap;
    }

    .orderPro {
        flex: 0 50%;
    }

    .orderProImg {
        margin: 0 auto;
    }

    .howToContainer {
        flex-wrap: wrap;
    }

    .howTo {
        flex: 0 50%;
    }

    .howToImg img {
        margin: 8px auto;
        display: block;
    }

    .howTo:nth-child(3) {
        order: 4;
    }

    .howTo:nth-child(4) {
        order: 3;
    }

    .farrowTablet {
        transform: rotate(90deg);
        bottom: -15px;
        top: unset;
        left: unset;
        right: 40%;
    }

    .farrowTablet2 {
        transform: rotate(180deg);
        left: 0;
        right: unset;
    }

    .howToDesc {
        padding-bottom: 60px;
    }

    .logo {
        flex: 0 100%;
        text-align: center;
        margin: 20px auto;
    }

    .header {
        flex-wrap: wrap;
    }

    .headerPros {
        width: 100%;
    }

    header.header.container {
        width: 100%;
    }
}

@media only screen and (max-width:1000px) {
    .product img {
        display: block;
        margin: 0 auto;
    }
}