@media screen and (max-width:1024px) {
    .yellospan {
        font-size: 25px;
        font-weight: bolder;
        color: rgb(197, 158, 52);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .greenspan {
        font-size: 25px;
        font-weight: bolder;
        color: var(--greenone);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .title {
        width: 100%;
    }

        .title h1 {
            font-weight: bolder;
            font-size: 15px;
            position: absolute;
            top: 5%;
            left: 15%;
        }

        .title span {
            color: #e9faf4;
            font-weight: bolder;
            font-size: 30px;
        }

        .title p {
            position: absolute;
            left: 12%;
            top: 20%;
            width: 40%;
            font-weight: bold;
            color: #e9faf4;
            font-size: 12px;
        }

    .main p {
        text-align: justify;
        text-justify: inter-word;
        line-height: 1.6rem;
        font-weight: 100;
        font-size: 12px;
        color:black;
    }

    .footer h4 {
        font-size: 14px;
        font-weight: bolder;
    }

    .footer h6 {
        font-size: 10px;
        font-weight: bolder;
    }

    .contactspan {
        color: var(--creamone);
        font-weight: bolder;
        font-size: 13px;
    }

    .info input {
        width: 48%;
        margin-bottom: 5px;
        padding: 5px;
        border: none;
        outline: none;
        background-color: var(--creamone);
        color: var(--greenone);
        border-bottom: 1px solid var(--greenone);
        font-weight: bold;
        caret-color: #fff;
        font-size: 12px;
    }

    .textmessage {
        width: 100%;
        margin: 5px 0;
        background-color: var(--creamone);
        border: none;
        border-bottom: 1px solid var(--creamone);
        outline: none !important;
        padding: 5px;
        color: var(--greenone) !important;
        font-weight: bold;
        font-size: 12px;
    }

    .featureTitle {
        font-size: 25px;
        font-weight: bolder;
        color: var(--greenone);
    }
    .block6 {
        position: absolute;
        top: 5.6rem;
        left: 0;
        width: 94%;
        height: 2rem;
        background-image: linear-gradient( to right,var(--greenone) 70%, var(--creamone) 95%);
    }
}

@media screen and (max-width:467px) {
    .yellospan {
        font-size: 16px;
        font-weight: bolder;
        color: rgb(197, 158, 52);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .video{
        height:280px;
        width:80%;
    }
    .greenspan {
        font-size: 16px;
        font-weight: bolder;
        color: var(--greenone);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .title {
        width: 100%;
        height: 10rem;
    }

        .title h1 {
            font-weight: bolder;
            font-size: 10px;
            position: absolute;
            top: 5%;
            left: 15%;
        }

        .title span {
            color: #e9faf4;
            font-weight: bolder;
            font-size: 20px;
        }

        .title p {
            position: absolute;
            left: 10%;
            top: 20%;
            width: 80%;
            font-weight: bold;
            color: #e9faf4;
            font-size: 12px;
        }

    .options ul li h5 {
        font-size: 20px;
        font-weight: bolder;
        color: rgb(107, 135, 125);
    }
    .repository::before {
        content: "";
        background-image: url('../img/mainBackgroundMobile copy.svg');
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        background-size: contain;
        background-attachment: fixed;
        opacity: 0.4;
    }
    .card {
        width: 100%;
        margin: auto;
        padding: 20px;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
        height: 20rem;
    }
    .main p {
        text-align: justify;
        text-justify: inter-word;
        line-height: 1.6rem;
        font-weight: 100;
        font-size: 12px;
        color: black;
    }

    .footer h4 {
        font-size: 14px;
        font-weight: bolder;
    }

    .footer h6 {
        font-size: 10px;
        font-weight: bolder;
    }

    .contactspan {
        color: var(--creamone);
        font-weight: bolder;
        font-size: 13px;
    }

    .info input {
        width: 48%;
        margin-bottom: 5px;
        padding: 5px;
        border: none;
        outline: none;
        background-color: var(--creamone);
        color: var(--greenone);
        border-bottom: 1px solid var(--greenone);
        font-weight: bold;
        caret-color: #fff;
        font-size: 12px;
    }

    .textmessage {
        width: 100%;
        margin: 5px 0;
        background-color: var(--creamone);
        border: none;
        border-bottom: 1px solid var(--creamone);
        outline: none !important;
        padding: 5px;
        color: var(--greenone) !important;
        font-weight: bold;
        font-size: 12px;
    }

    .featureTitle {
        font-size: 25px;
        font-weight: bolder;
        color: var(--greenone);
    }
    .block1 {
        position: absolute;
        top: 0;
        left: 0;
        width: 80%;
        height: .5rem;
        background-color: var(--greenone);
    }

    .block2 {
        position: absolute;
        top: .5rem;
        left: 0;
        width: 90%;
        height: .5rem;
        background-color: var(--creamone);
    }

    .block3 {
        position: absolute;
        top: 1.1rem;
        left: 0;
        width: 95%;
        height: 1.5rem;
        background-image: linear-gradient( to right,var(--creamone) 20%, var(--greenone) 60%);
    }

    .block4 {
        position: absolute;
        top: 2.7rem;
        left: 0;
        width: 60%;
        height: .7rem;
        background-image: linear-gradient( to right,var(--greenone) 30%, var(--creamone) 60%);
    }

    .block5 {
        position: absolute;
        top: 3.5rem;
        left: 0;
        width: 90%;
        height: 2rem;
        background-image: linear-gradient( to right,var(--greenone) 60%, var(--creamone) 95%);
    }

    .block6 {
        position: absolute;
        top: 5.6rem;
        left: 0;
        width: 94%;
        height: 2rem;
        background-image: linear-gradient( to right,var(--greenone) 70%, var(--creamone) 95%);
    }
    .block7 {
        position: absolute;
        top: 7.7rem;
        left: 0;
        width: 90%;
        height: 3.5rem;
        background-image: linear-gradient( to right,var(--greenone) 70%, var(--creamone) 90%);
    }

    .block8 {
        position: absolute;
        top: 11.3rem;
        left: 0%;
        width: 80%;
        height: 2rem;
        background-image: linear-gradient( to right,var(--creamone) 30%, var(--greenone) 60%);
    }

    .block9 {
        position: absolute;
        top: 13.4rem;
        left: 0;
        width: 90%;
        height: 2rem;
        background-image: linear-gradient( to right,var(--greenone) 70%, var(--creamone) 90%);
    }

    .block10 {
        position: absolute;
        top: 15.5rem;
        left: 0;
        width: 100%;
        height: 3rem;
        background-image: linear-gradient( to right,var(--greenone) 80%, var(--creamone) 95%);
    }
}