body{
   margin:0;
   padding:0;
}

.new-container {
    padding: 0 !important;
}

.cs-hero-section{
    width:90%;
    margin-top:80px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:70px;

}

.cs-hero-image-container img{
    width:100%;
}

.cs-hero-text-container h1{
    font-size:28px;
    margin-top:20px;
    text-align:center;
}

.cs-hero-text-container h2 {
    font-size: 18px;
    font-weight:400;
    margin-top:20px;
    text-align:center;
}

.cs-video-section {
    padding: 60px 20px;
    background-image: linear-gradient(140deg, rgb(152, 141, 247) 0%, rgb(234, 233, 242) 55%, rgb(234, 233, 242) 75%, rgb(152, 141, 247) 100%);
}

.cs-video-header {
    font-size: 18px;
    font-weight: 400;
    margin-top: 20px;
    color: darkslategray;
    text-align:center!important;

}

    .cs-video-header a {
        color: rgb(90,61,235)
    }

.cs-video {
    width: 100%;
    height: 160px;
    }



.cs-video-button-container {
    display: flex;
    justify-content: center;
}

.cs-video-button {
    background-color: transparent;
    border-radius: 4px;
    color: darkslategray;
    font-size: 16px;
    font-weight: 500;
    outline: none;
    border: 2px solid darkslategray;
    padding: .5em 1.5em;
    margin-top: 20px;
}

    .cs-video-button:hover {
        border: 3px solid rgb(90,61,235);
        color: rgb(90,61,235);
    }

    .cs-video-button:active {
        border: 3px solid rgb(48, 12, 237);
        color: rgb(48, 12, 237);
    }

.cs-function-header {
    width: 95%;
    font-size: 30px;
    text-align: center;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
}

.cs-function-container {
    width: 85%;
    margin-top: 30px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 30px;
    padding: 10px;
    box-shadow: rgba(50,50,93,0.25) 0 2px 5px -1px, rgba(0,0,0,0.3) 0 1px 20px -1px;
    border-radius: 4px;
}

.cs-function-image-container{
    display: flex;
    justify-content: center;
    padding: 20px;
}

.cs-function-image {
    width: 100%;
}

.cs-function-header-text-container {
    padding: 1em;
}

.cs-function-homepage-header {
    font-size: 16px;
    font-weight: 400;
    margin: 0;
    text-align:left;
}

.cs-contact-section {
    padding: 3rem;
    background-image: linear-gradient(140deg, rgb(152, 141, 247) 0%, rgb(234, 233, 242) 55%, rgb(234, 233, 242) 75%, rgb(152, 141, 247) 100%);
}

.cs-contact-section a {
        color: rgb(90,61,235)
}

.cs-contact-header{
    text-align:left;
    font-size:18px;
    font-weight:400;
}

@media screen and (min-width:370px) {
    .cs-video {
        height: 170px;
    }

    .cs-hero-section {
        width: 80%;
    }
}

@media screen and (min-width:380px) {
    .cs-video {
        height: 180px;
    }
}

@media screen and (min-width:400px){
    .cs-hero-section{
        width:80%;
    }

    .cs-video-section{
        padding:60px 30px;
    }

    .cs-video{
        height:180px;
    }
}

@media screen and (min-width:425px) {
    .cs-video {
        height: 193px;
    }
}


@media screen and (min-width:450px) {


    .cs-video-section {
        padding: 60px 30px;
    }

    .cs-video-header{
        width:90%;
        margin-left:auto;
        margin-right:auto;
        margin-top:20px;

    }
    .cs-video {
        height: 205px;
    }
    .cs-contact-section{
        padding:4rem;
    }
}

@media screen and (min-width:475px) {
    .cs-video {
        height: 218px;
    }
}

@media screen and (min-width:500px) {
    .cs-hero-section{
        width:75%;
    }
    .cs-hero-text-container h1{
        font-size:32px;
    }

    .cs-video-section{
        padding: 60px 40px;
    }
    .cs-video {
        height: 220px;
    }
    .cs-contact-section {
        padding: 5rem;
    }
}

@media screen and (min-width:475px) {
    .cs-video {
        height: 221px;
    }
}

@media screen and (min-width:550px) {
    .cs-video{
        height:247px;
    }
    .functionality-section{
        width:90%;
        margin-left:auto;
        margin-right:auto;
    }
}

@media screen and (min-width:600px) {
        .cs-video-section {
            padding: 60px 50px;
        }

        .cs-video {
            height: 264px;
        }

        .cs-video-header {
            width: 85%;
            font-size: 20px;
            margin-top: 30px;
            text-align: center;
        }

        .cs-contact-section {
            padding: 60px 100px;
        }
    }

    @media screen and (min-width:650px) {
        .cs-video-section{
            padding:60px;
        }
        .cs-video-header{
            width:80%;
            margin-left:auto;
            margin-right:auto;
            font-size: 22px;
        }
        .functionality-section {
            width: 80%;
            margin-left: auto;
            margin-right: auto;
        }
        .cs-contact-section {
            padding: 60px 110px;
        }

        .cs-video {
            height: 278px;
        }
       
    }



@media screen and (min-width:700px) {
        .cs-contact-section{
            padding:60px 130px;
        }
        .cs-video {
            height: 304px;
        }
    }

@media screen and (min-width:725px) {
    .cs-video {
        height: 317px;
    }

    .cs-contact-section {
        padding: 60px 130px;
    }

    .cs-video {
        height: 304px;
    }
}




@media screen and (min-width:750px) {
    .cs-contact-section {
        padding: 60px 150px;
    }
    .cs-video {
        height: 330px;
    }
}

@media screen and (min-width:775px) {

    .cs-video {
        height: 342px;
    }
}

    @media screen and (min-width:800px) {
        .cs-hero-section{
            width:70%;
        }

        .cs-hero-image-container{
            width:80%;
            margin-left:auto;
            margin-right:auto;
        }

        .cs-video-section {
            display: flex;
            padding: 60px 20px;
            justify-content: center;
        }

        .cs-video-container{
            width:60%;

        }
        .cs-video-text-container{
            width:40%;
            display:flex;
            flex-direction:column;
            justify-content:center;

        }
        .cs-video-header{
            font-size:20px;
        }
        .cs-contact-section {
            padding: 60px 180px;
        }

        .cs-video {
            height: 242px;
        }
    }

@media screen and (min-width:825px) {

    .cs-video {
        height: 250px;
    }
}

    @media screen and (min-width:850px) {
        .cs-hero-section {
            width: 65%;
        }

        .cs-contact-section {
            padding: 60px 150px;
        }

        .cs-video-section{
            padding:60px 80px;
        }
        .cs-video {
            height: 219px;
        }

        .functionality-section {
            display: flex;
            flex-wrap: wrap;
            width: 95%;
            margin-left: auto;
            margin-right: auto;
        }

        .cs-function-container {
            width: 42%;
            display: flex;
            flex-direction: column;
            height: auto;
            align-items: center
        }
        .function-image{
            margin-left:auto;
            margin-right:auto;
        }
        .cs-contact-section {
            padding: 60px 190px;
        }
    }

@media screen and (min-width:875px) {

    .cs-video {
        height: 225px;
    }
}

@media screen and (min-width:900px) {
    .cs-hero-section {
        width: 55%;
    }

    .cs-hero-text-container h1{
        font-size:28px;
    }


    .cs-hero-text-container h2 {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .cs-video-section {
        padding: 60px 130px
    }

    .cs-video {
        height: 204px;
    }

    .cs-contact-section {
        padding: 60px 180px;
    }
}

@media screen and (min-width:925px) {
    .cs-video {
        height: 211px;
    }
}

@media screen and (min-width:950px) {
    .cs-video {
        height: 218px;
    }
}

@media screen and (min-width:975px) {
    .cs-video {
        height: 227px;
    }
}

@media screen and (min-width:1000px) {
    .cs-video {
        height: 234px;
    }
}

@media screen and (min-width:1025px) {
    .cs-video {
        height: 242px;
    }
}

@media screen and (min-width:1050px) {
    .cs-video {
        height: 250px;
    }
}

@media screen and (min-width:1075px) {
    .cs-video {
        height: 257px;
    }
}



@media screen and (min-width:1100px) {
    .cs-hero-image-container {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }

    .cs-video-section {
        padding: 60px 150px;
    }

    .cs-video {
        height: 252px;
    }

    .cs-contact-section {
        padding: 60px 210px;
    }

    .functionality-section {
        width: 85%;
    }
}

@media screen and (min-width:1125px){
    .cs-video {
        height: 260px;
    }
}

@media screen and (min-width:1150px) {
    .cs-video {
        height: 267px;
    }
}

@media screen and (min-width:1175px) {
    .cs-video {
        height: 275px;
    }
}

@media screen and (min-width:1200px) {
    .cs-hero-image-container {
        width: 70%;
    }

    .cs-hero-text-container h1 {
        font-size: 36px;
    }

    .cs-video-section {
        padding:80px 120px;
    }

    .cs-video {
        height: 301px;
    }

    .functionality-section {
        width: 80%;
    }

    .cs-contact-section {
        padding: 80px 250px;
    }
}

@media screen and (min-width:1225px) {
    .cs-video {
        height: 309px;
    }
}

@media screen and (min-width:1250px) {
    .cs-video {
        height: 317px;
    }
    .cs-video-header {
        font-size:22px;
        width:70%;
    }

@media screen and (min-width:1275px) {
    .cs-video {
        height: 329px;
    }
}


@media screen and (min-width:1300px) {
    .functionality-section {
        width: 70%;
    }

    .cs-video {
        height: 309px;
    }
    .cs-video-section{
        padding:80px 160px;
    }
 }

@media screen and (min-width:1325px) {
    .cs-video {
        height: 318px;
    }
}

@media screen and (min-width:1350px) {
    .cs-video {
        height: 324px;
    }
    .cs-video-button{
        font-size:18px;
    }
}

@media screen and (min-width:1375px) {
    .cs-video {
        height: 335px;
    }
}

@media screen and (min-width:1400px) {
    .cs-video-section {
        padding: 60px 200px;
    }

    .cs-video {
        height: 315px;
    }

    .functionality-section {
        width: 70%;
    }

    .cs-contact-section {
        padding: 80px 318px;
    }
}

@media screen and (min-width:1425px) {
    .cs-video {
        height: 326px;
    }
}

@media screen and (min-width:1450px) {
    .cs-video {
        height: 334px;
    }

    .cs-video-header {
        font-size:24px;
    }

@media screen and (min-width:1475px) {
    .cs-video {
        height: 341px;
    }
}





 @media screen and (min-width:1500px) {
    .cs-video-section {
        padding: 50px 220px;
    }
    .cs-video {
        height: 335px;
    }

    .functionality-section {
        width: 70%;
    }

    .cs-contact-section {
        padding: 80px 280px;
    }

    .cs-video-header{
        font-size:26px;
    }
    .cs-video-button{
        font-size:20px;
    }
  }

@media screen and (min-width:1525px) {
    .cs-video {
        height: 344px;
    }
}

@media screen and (min-width:1550px) {
    .cs-video {
        height: 351px;
    }
}

@media screen and (min-width:1575px) {
    .cs-video {
        height: 358px;
    }
}



@media screen and (min-width:1600px) {
    .cs-hero-text-container h1{
        width:80%;
        margin-left:auto;
        margin-right:auto;

    }
    .cs-hero-text-container h2 {
        width: 70%;
        margin-left: auto;
        margin-right: auto;
        font-size:20px;
    }
    .cs-video-section {
        padding: 50px 220px;
    }

    .functionality-section {
        width: 70%;
    }

    .cs-contact-section {
        padding: 80px 280px;
    }

    .cs-video {
        height: 367px;
    }
}

@media screen and (min-width:1625px) {
    .cs-video {
        height: 375px;
    }
}

@media screen and (min-width:1650px) {
    .cs-video {
        height: 382px;
    }
}

@media screen and (min-width:1675px) {
    .cs-video {
        height: 390px;
    }
}

@media screen and (min-width:1700px) {
    .cs-video {
        height: 400px;
    }
    .cs-video-header{
        font-size:28px;
    }
}

@media screen and (min-width:1725px) {
    .cs-video {
        height: 407px;
    }
}

@media screen and (min-width:1750px) {
    .cs-video {
        height: 413px;
    }
}