@media (min-width: 1201px) {

    #heading-about {
      position: relative; 
        top: 10%;
        left: 8%;
        font-size: 65px;
        color: #07c75a;
        font-weight: 800;
        font-size: 60px !important;
    }

    #pars {
      position: relative; 
        top: 35%;
        left: 10%;
        width: 650px !important;

    }

    #pars p {
        font-size: 25px !important;
        font-weight: 700;
        color: #fff;
        line-height: 32px;
        margin-bottom: 27px;
    }

    .line-para {
        position: relative;
    }

    .tick {
      position: relative; 
        left: -28px;
    }

    #rect {
      position: relative; 
        top: 5%;
        left: 8%;
        height: 20px;
        width: 100px;
        background-color: #07c75a;
        ;
    }

    .unknow {
        display: block;
        padding: 18px 25px !important;
        background: rgba(237, 245, 255, 1);
        margin-top: 15px;
        position: relative;
        z-index: 1;
        font-weight: 600;
        overflow: hidden;
        border-radius: 5px;
    }

    .unknow:hover {
        color: #ffffff;
    }

    .unknow:hover::before {
        width: 100%;
    }

    h2 {
        font-size: 30px;
    }

    .unknow::before {
      position: absolute; 
        left: 0;
        top: 0;
        content: "";
        height: 100%;
        width: 0;
        background: #07c75a;
        z-index: -1;
        transition: all 0.35s ease-in-out;
    }
}

@media (min-width:993px) and (max-width:1200px) {

    .unknow {
        display: block;
        padding: 18px 25px;
        background: rgba(237, 245, 255, 1);
        margin-top: 15px;
        position: relative;
        z-index: 1;
        font-weight: 600;
        overflow: hidden;
        border-radius: 5px;
    }

    .unknow:hover {
        color: #ffffff;
    }

    .unknow:hover::before {
        width: 100%;
    }

    .unknow::before {
      position: relative; 
        left: 0;
        top: 0;
        content: "";
        height: 100%;
        width: 0;
        background: #07c75a;
        z-index: -1;
        transition: all 0.35s ease-in-out;
    }

    #heading-about {
      position: relative; 
        top: 13%;
        left: 10%;
        font-size: 43px;
        color: #07c75a;
        font-weight: 800;
    }

    #pars {
         position: relative; 
        top: 35%;
        left: 10%;
        width: 500px;

    }

    #pars p {
        font-size: 20px !important;
        font-weight: 700;
        color: #fff;
    }

    .line-para {
        position: relative;
    }

    .tick {
         position: relative; 
        left: -28px;
    }

    #rect {
         position: relative; 
        top: 5%;
        left: 8%;
        height: 20px;
        width: 100px;
        background-color: #07c75a;
        ;
    }
}

@media (min-width:769px) and (max-width:992px) {

    .unknow {
        display: block;
        padding: 10px 25px;
        background: rgba(237, 245, 255, 1);
        margin-top: 15px;
        position: relative;
        z-index: 1;
        font-weight: 600;
        overflow: hidden;
        border-radius: 5px;
    }

    .unknow:hover {
        color: #ffffff;
    }

    .unknow:hover::before {
        width: 100%;
    }

    .unknow::before {
         position: relative; 
        left: 0;
        top: 0;
        content: "";
        height: 100%;
        width: 0;
        background: #07c75a;
        z-index: -1;
        transition: all 0.35s ease-in-out;
    }

    #heading-about {
         position: relative; 
        top: 13%;
        left: 10%;
        font-size: 51px;
        color: #07c75a;
        font-weight: 700;
    }

    #pars {
         position: relative; 
        top: 30%;
        left: 10%;
        width: 400px;

    }

    #pars p {
        font-size: 17px !important;
        font-weight: 600;
        color: #fff;
    }

    .line-para {
        position: relative;
    }

    .tick {
         position: relative; 
        left: -28px;
    }

    #rect {
         position: relative; 
        top: 5%;
        left: 8%;
        height: 20px;
        width: 100px;
        background-color: #07c75a;
        ;
    }
}

@media (min-width:576px) and (max-width:768px) {

    .unknow {
        display: block;
        font-size: 10px !important;
        padding: 3px 4px !important;
        background: rgba(237, 245, 255, 1);
        margin-top: 15px;
        position: relative;
        z-index: 1;
        font-weight: 600;
        overflow: hidden;
        border-radius: 5px;
    }

    .unknow:hover {
        color: #ffffff;
    }

    .unknow:hover::before {
        width: 100%;
    }

    .unknow::before {
         position: relative; 
        left: 0;
        top: 0;
        content: "";
        height: 100%;
        width: 0;
        background: #07c75a;
        z-index: -1;
        transition: all 0.35s ease-in-out;
    }

    #heading-about {
         position: relative; 
        top: 13%;
        left: 10%;
        font-size: 37px !important;
        color: #07c75a;
        font-weight: 700;
    }

    #pars {
         position: relative; 
        top: 23%;
        left: 10%;
        width: 240px !important;

    }

    #pars p {
        font-size: 13px !important;
        font-weight: 600;
        color: #fff;
        margin-bottom: 8px;
    }

    .line-para {
        position: relative;
    }

    h2 {
        font-size: 15px !important;
    }

    .tick {
         position: relative; 
        left: -28px;
    }

    #rect {
         position: relative; 
        top: 5%;
        left: 8%;
        height: 15px;
        width: 80px;
        background-color: #07c75a;
        ;
    }
}

@media (max-width:575px) {

    .unknow {
        font-size: 7px;
        display: block;
        padding: 4px 4px;
        background: rgba(237, 245, 255, 1);
        margin-top: 15px;
        position: relative;
        z-index: 1;
        font-weight: 600;
        overflow: hidden;
        border-radius: 5px;
        margin-top: 5px;
    }


    .unknow:hover {
        color: #ffffff;
    }

    .unknow:hover::before {
        width: 100%;
    }

    .unknow::before {
         position: relative; 
        left: 0;
        top: 0;
        content: "";
        height: 100%;
        width: 0;
        background: #07c75a;
        z-index: -1;
        transition: all 0.35s ease-in-out;
    }

    #heading-about {
         position: relative; 
        top: 10%;
        left: 10%;
        font-size: 24px !important;
        color: #07c75a;
        font-weight: 600;
    }

    #pars {
         position: relative; 
        top: 23%;
        left: 10%;
        width: 170px;
        line-height: 20px;

    }

    h2 {
        font-size: 10px !important;
        margin-bottom: 2px !important;
    }

    #pars p {
        font-size: 10px !important;
        font-weight: 600;
        color: #fff;
        margin-bottom: 0px;
    }

    .line-para {
        position: relative;
    }

    .tick {
         position: relative; 
        left: -18px;
    }

    #rect {
         position: relative; 
        top: 5%;
        left: 8%;
        height: 6px;
        width: 50px;
        background-color: #07c75a;

    }
}