@media only screen and (max-width: 710px) {

    main{
        grid-template-rows: 50px 300px repeat(auto-fill, minmax(200px, 4fr));
    }
    /*mainpage*/

    .intViewBgImg{
        display: none;
    }

    .top-head-section h1{
        font-size: 30px;
        width: 84%;

    }

    .top-head-section p{
        font-size: 16px;
        line-height: 28px;
        margin-top: 8%;
    }

    .menu-buttons{
        width: 100%;
        flex-direction: column;
        align-items: center;
        padding-top: 2%;
        margin-top: 0;
    }

    .book-demo{
        font-size: 14px;
        width: 240px;
        height: 42px;
        margin-bottom: 2%;
    }

    .intPortalMastHead{
        background: url(../images/rings.png) no-repeat center bottom;
        padding: 30px 20px 20px;
        background-size: 100%;
        animation: none;
    }

    .featureMastBody{
        padding-bottom: 10%;
        padding-top: 2%;
    }

    .svgParticleTwelve,
    .svgParticleThirteen,
    .svgParticleFourteen,
    .svgParticleFifteen,
    .svgParticleOne,
    .svgParticle,
    .svgParticleTwo,
    .svgParticleFive,
    .svgParticleFour,
    .svgParticleThree{
        display: none;
    }

    /*card page*/

    .head-size{
        font-size: 24px;
    }

    .sub-header{
        width: 77%;
        text-align: center;
    }

    .card-container{
        row-gap: 28px;
    }

    .content-section{
        padding: 7% 10%;
    }
    .card{
        width: 300px;
        margin-bottom: 0;
    }  

    /*content-section*/

    .left-section{
        justify-content: center;
    }

    .sub-feature-head{
        font-size: 24px;
        line-height: 33px;
    }

    .sub-para{
        font-size: 15px;
        line-height: 20px;
    }

    .head-content {
        gap: 13px;
        padding: 2% 0;
    }

    .main-head-two{
        font-size: 24px;
        line-height: 33px;
        text-align: center;
        padding-right: 0%;
        width: 89%;
    }

    /*carousel*/

  /* Fading animation */
    .fade {
        animation-name: fade;
        animation-duration: 1.5s;
        margin: auto;
    }

    @keyframes fade {
        from {opacity: .4} 
        to {opacity: 1}
    }

    .platform-card-container{
        display: none;
    }

    .platform-section{
        padding: 2%;
    }

    .form-container{
        flex-direction: column;
    }
    .img-container h1{
        font-size: 24px;
    }
    .img-container p{
        font-size: 15px;
    }
    .img-container {
        width: 100%;
    }
    .left{
        border-top-right-radius: 22px;
        border-top-left-radius: 22px;
        background: none;
        background-color: #4EB04E;
    }

    .form-section{
        padding: 0% 2%;
    }

    .form-container{
        padding: 0%;
    }

    .platform-para-heading{
        font-size: 14px;
        text-align: center;
        width: 93%;
        padding: 0 0 6% 6%;
        line-height: 23px;
    }

    .platform-main-heading{
        font-size: 24px;
        text-align: center;
        line-height: 45px;
    }

    .platform-section-header{
        padding-right: 0%;
        align-items: center;
        justify-content: center;
    }

    .platform-content-section{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-bottom: 0%;
    }

    .platform-card-content{
        padding-top: 37px;
        flex: 2;
    }

    .card-icon{
        flex: .5;
    }

    #carousel-container {
        width: 300px;
        overflow: hidden;
        position: relative;
        display: block;
    }

    #carousel {
        display: flex;
        transition: transform 0.3s ease-in-out;
    }

    .slide {
        min-width: 300px;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        font-size: 24px;
    }

    #dots-container {
        display: flex;
        justify-content: center;
        margin-top: 10px;
        padding: 11% 0;
    }

    .dot {
        cursor: pointer;
        height: 8px;
        width: 8px;
        margin: 0 2px;
        background-color: #F4FFF4;
        border-radius: 50%;
        transition: background-color 0.6s ease;
        border: 1px solid #4EB04E;
    }

    .dot.active {
        background-color: #4EB04E;
    }

    .assessFeatureContainer {
        padding: 50px 20px;
        flex-direction: column;
        gap: unset;
    }

    .assessFeatureDescSet {
        align-items: center;
        opacity: 1;
        width: 100%;
    }

    .assessFeatureDescSet p, .assessFeatureDescSet h3 {
        text-align: center;
    }

    .assessFeatureDescSet p{
        font-size: 12px;
    }

    .assessFeatureDescSet h3 {
        font-size: 24px;
    }

    .assessFeatureDescSet h3 div {
        display: block;
        color: #4eb04e;
    }

    .assessFeatureDescSet, .assessFeatureImgSet {
        width: 100%;
        opacity: 1;
    }

    .assessFeatureContainer:nth-child(1) .assessFeatureImg {
        background-size: contain;
        width: 100%;
        height: 100%;
        min-height: 300px;
    }

    .assessFeatureNew{
        flex-direction: column-reverse;
    }
    .para-two {
        padding-left: unset;
    }

    .assessFeatureImgSet-one,
    .assessFeatureImgSet-three,
    .assessFeatureImgSet-four,
    .assessFeatureImgSet-five,
    .assessFeatureImgSet-six,
    .assessFeatureImgSet-seven{
        background-size: contain;
        width: 100%;
        height: 100%;
        min-height: 300px;
        margin-left: unset;
    }

    .assessFeatureMain{
        padding: 0%;
    }
}