body {
    margin: 0;
}

@font-face {
    font-family: inter;
    src: url(fonts/Inter/Inter-VariableFont_slnt\,wght.ttf);
}

a:active,a:link,a:visited {
    color: inherit;
    text-decoration: none;
}

#navigationMenu {
    visibility: hidden;
    position: fixed;
    width: 0%;
    height: 100%;
    background: white;
    transition: 0.5ms;
}

#crossIcon {
    cursor: pointer;
    position: absolute;
    font-size: 5vw;
    margin-top: 2vw;
    margin-right: 2vw;
    right: 0.5vw;
    top: 0.1vw;
}

#navTitle {
    text-align: center;
    font-family: sans-serif;
    font-weight: bold;
    color: #ff1c1c;
    font-size: 7vw;
    margin-top: 6vw;
}

#menuOptions {
    width: 70%;
    margin: auto;
    margin-top: 5vw;
}

.menuOpClass {
    font-family: sans-serif;
    font-size: 6vw;
    padding: 1vw;
    text-align: center;
    border-bottom: solid grey thin;
}

.menuOpClass:hover {
    cursor: pointer;
    background: gainsboro;
}

#header {
    display: flex;
    background: white;
    box-shadow: 0vw 0.2vw 0.35vw rgb(173, 173, 173);
    height: 6.07vw;
}

#webTitle {
    color: #454546;
    font-family: inter;
    font-size: 2.7vw;
    font-weight: 600;
    padding: 1.3vw;
    padding-left: 2.5vw;
    margin-top: 0.5vw;
}

#tabs {
    display: flex;
}

#menu {
    display: flex;
    width: 30vw;
    margin-left: 23vw;
    font-family: inter;
    font-size: 1.61vw;
    font-weight: 500;
    color: #1FBCFF;
}

#home, #about, #apps, #blog, #contact {
    cursor: pointer;
    margin-left: 0.25vw;
    padding: 1vw;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    margin-top: 1.6vw;
    margin-bottom: 1.45vw;
    border-radius: 0.29vw;
}

#home {
    background: #1FBCFF;
    color: white;
}

#home:hover, #about:hover, #apps:hover, #blog:hover, #contact:hover {
    background: #1FBCFF;
    color: white;
}

#buttonSign {
    cursor: pointer;
    color: white;
    background: #1FBCFF;
    font-family: inter;
    font-weight: 600;
    font-size: 1.68vw;
    width: 9.15vw;
    text-align: center;
    vertical-align: middle;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    align-items: center;
    margin-left: 10.5vw;
    margin-bottom: 1.4vw;
    margin-top: 1.5vw;
    border-radius: 4.39vw;
}

.barIconClass {
    visibility: hidden;
    width: 0vw;
    background: #454546;
    height: 1vw;
    margin-top: 0.6vw;
}

#bannerCon {
    padding-bottom: 4vw;
    display: flex;
}

#vectorImg {
    width: 33vw;
    margin-top: 4.5vw;
    margin-left: 5vw;
}

#column2 {
    width: 61.5vw;
}

#bannerTextCon {
    color: #7F47DD;
    text-align: center;
    font-family: inter;
    font-size: 3.14vw;
    font-weight: 300;
    margin-top: 7.5vw;
}

#semiBoldText {
    font-weight: 600;
}

#getStartedBtn {
    cursor: pointer;
    box-shadow: 0vw 0.2vw 0.35vw rgb(173, 173, 173);
    text-align: center;
    font-family: inter;
    font-size: 2.56vw;
    font-weight: 600;
    color: white;
    background: #7F47DD;
    width: 20.5vw;
    border-radius: 3.66vw;
    padding-top: 0.5vw;
    padding-bottom: 0.7vw;
    margin-top: 3.5vw;
}

.titleClass {
    width: 85vw;
    color: #7F47DD;
    font-family: inter;
    font-weight: 600;
    font-size: 3.367vw;
    margin: auto;
    margin-top: 2vw;
}

#subTitles {
    font-size: 2.7vw;
    color: #f74a4a;
}

#graphicContentBlog {
    text-align: center;
    margin-top: 1vw;
}

#graphicContent2 {
    margin-top: 1.5vw;
}

.graphicCardClass {
    display: flex;
    width: 77.4vw;
    margin: auto;
    margin-top: 2.5vw;
}

.graphicClass {
    height: 24.909vw;
    width: 24.743vw;
    box-shadow: 0vw 0vw 0.35vw rgb(173, 173, 173);
    border-radius: 1vw;
}

/*
#oneGraphic {
    background: linear-gradient(rgba(0, 191, 203), rgba(1, 30, 128, 0.5));
}

#twoGraphic {
    background: linear-gradient(rgba(173, 1, 254), rgba(1, 30, 128, 0.5));
}

#threeGraphic {
    background: linear-gradient(rgba(250, 11, 126), rgba(1, 30, 128, 0.5));
} */

#twoGraphic, #threeGraphic {
    margin-left: 1.5vw;
}

.contentText {
    text-align: justify;
    color: #333333;
    width: 85vw;
    font-family: inter;
    font-weight: 400;
    font-size: 1.976vw;
    margin: auto;
    margin-top: 3vw;
}

.liSemiBold {
    font-weight: 600;
}

ul {
    margin-left: 0vw;
}

li {
    padding-top: 0.5vw;
}

.viewAllText {
    cursor: pointer;
    color: white;
    background: #f74a4a;
    width: 12vw;
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    border-radius: 2vw;
    font-family: inter;
    font-weight: 500;
    font-size: 1.976vw;
    margin-top: 3vw;
}

#headphoneVector {
    margin: 1.3vw;
    border-radius: 0.5vw;
}

#ytGraphic, #ytGraphic2 {
    height: 22.6vw;
    width: 46vw;
}

#ytGraphic2 {
    margin-left: 1.5vw;
}

#graphicImgConBlog {
    width: 55vw;
}

#blogGraphic {
    width: 55vw;
    height: 30vw;
}

#blogImage, #blogImage2 {
    border-radius: 2vw;
}

#blogImage2 {
    padding: 1vw;
}

.vEmbedOne {
    background: rgb(77, 77, 77);
    width: 35vw;
    height: 19.6vw;
    font-family: inter;
    font-size: 3vw;
    margin-top: 1.5vw;
    margin-left: 1.5vw;
    text-align: center;
    vertical-align: middle;
    color: white;
    cursor: pointer;
    border-radius: 0.6vw;
}

.loadVideo {
    padding-top: 8vw;
}

iframe {
    outline: none;
    border: none;
    border-radius: 0.5vw;
}

.listStyle {
    width: 85vw;
    margin: auto;
    font-family: inter;
    margin-top: 2vw;
}

.listElements {
    border-radius: 0.8vw;
    background: white;
    display: flex;
    padding: 1vw;
    padding-bottom: 0.75vw;
    color:rgb(56, 56, 56);
    box-shadow: 0vw 0vw 0.2vw rgb(173, 173, 173);
    margin-bottom: 1vw;
}

.listImg {
    width: 48vw;
}

.listCol2 {
    margin-left: 1vw;
}

.listTitle {
    font-size: 2vw;
    font-weight: 600;
    margin: 0.8vw;
    margin-top: 0.4vw;
}

#blogCon, #tuteCon, #technfactCon {
    height: 27vw;
}

#tuteCon, #technfactCon {
    margin-left: 2vw;
}

.listContent {
    margin: 0.8vw;
    font-size: 1.5vw;
}

#blogCard {
    text-align: justify;
}

.cardImgCon {
    width: 12vw;
    margin: auto;
    margin-top: 2vw;
}

.blogImg {
    border-radius: 100%;
}

.cardCol2 {
    font-family: inter;
    margin-top: 2vw;
    text-align: center;
}

.cardTitle {
    font-weight: 600;
    font-size: 2vw;
}

.cardDescription {
    font-size: 1.3vw;
    margin-top: 0.5vw;
    padding-left: 2vw;
    padding-right: 2vw;
}

#liCon, #fbCon {
    margin-left: 2vw;
}

#footerFlexLay {
    display: flex;
}

#footer {
    display: flex;
    font-family: inter;
    background: #7F47DD; /* ff812d 7bb661*/
    color: white;
    padding: 0.5vw;
    margin-top: 1vw;
    padding-bottom: 2vw;
}

#footerCol1, #footerCol2, #footerCol3 {
    padding: 2vw;
    width: 13vw;
}

#footerCol1 {
    margin-left: 2.5vw;
}

#credits {
    width: 50vw;
    margin-left: 4.5vw;
    margin-top: 0.3vw;
}

#copyright {
    font-size: 1.5vw;
}

#designer {
    font-size: 1.7vw;
    font-weight: 600;
    margin-top: 0.4vw;
}

.footerTitles {
    font-weight: 600;
    font-size: 2vw;
    width: 50vw;
}

.subList {
    margin-top: 1vw;
    font-size: 1.7vw;
    line-height: 2.5vw;
}

#footerColLast {
    width: 30vw;
    margin-top: 2.2vw;
    margin-left: 12vw;
}

#newsletter {
    font-weight: 600;
    font-size: 1.8vw;
}

#newsLetterDes {
    margin-top: 0.8vw;
    font-size: 1.5vw;
}

#inputContainer {
    display: flex;
    background: white;
    margin-top: 1vw;
    width: 26.7vw;
}

#emailImgDiv {
    width: 4vw;
    margin-top: 0.5vw;
    margin-left: 0.2vw;
}

#inputField {
    border: none;
    font-size: 1.5vw;
    height: 3.1vw;
    margin-left: 0.5vw;
    width: 22.5vw;
}

#inputField:focus {
    border: none;
    outline: none;
}

#subscribeBtn {
    cursor: pointer;
    font-size: 1.5vw;
    background: #222222;
    border: none;
    color: white;
    padding: 1vw;
    width: 27vw;
    margin-top: 1.5vw;
    border-radius: 0.5vw;
}

.wrapper { position: relative; overflow: hidden; width: 100%; padding-top: 56.2%; }.inner { position: absolute; width: 100%; top: 0; bottom: 0; left: 0; right: 0; height: 100%; }

@media screen and (max-width: 500px) {
    #tabs {
        visibility: hidden;
        width: 36vw;
    }


    #header {
	    height: 15vw;
	    box-shadow: 0vw 0.4vw 0.55vw rgb(173, 173, 173);
    }

    #webTitle {
	    font-size: 0vw;
	    padding: 6vw;
	    padding-left: 6vw;
    }

    #logoText {
        padding-top: 2vw;
    }

    #menu {
	    width: 0vw;
    }

    #bannerCon {
    	padding-bottom: 4vw;
	    display: inline;
    }

    #vectorImg {
    	width: 60vw;
	    margin: auto;
	    margin-top: 6.5vw;
    }

    #column2 {
        width: 99vw;
    }

    #bannerTextCon {
    	font-size: 6.5vw;
	    margin-top: 5.5vw;
    }

    #getStartedBtn {
	    font-size: 6vw;
	    width: 44vw;
	    padding-top: 1.2vw;
    	padding-bottom: 1.2vw;
	    border-radius: 7.5vw;
    }

    .titleClass {
	    font-size: 6.5vw;
	    margin-top: 10vw;
    }

    #subTitles {
        font-size: 5.3vw;
        margin-top: 4vw;
    }

    #graphicContent2 {
        margin-top: 3vw;
    }

    .viewAllText {
	    font-size: 4.6vw;
	    width: 25vw;
	    border-radius: 4vw;
	    padding-top: 1vw;
    	padding-bottom: 1vw;
	    margin-top: 6vw;
    }

    .contentText {
	    font-size: 4.5vw;
	    margin-top: 6vw;
    }

    #barIcon {
        cursor: pointer;
        margin-top: 4vw;
    }
    
    .barIconClass {
        visibility: visible;
        width: 9vw;
        background: #454546;
        height: 1.2vw;
        margin-top: 1vw;
    }

    .graphicCardClass {
        width: 78.4vw;
    }

    .graphicClass {
        height: 37.909vw;
        width: 37.743vw;
    }

    #twoGraphic, #threeGraphic {
        margin-left: 2.5vw;
    }

    #threeGraphic {
        width: 0vw;
        visibility: hidden;
        margin: 0;
    }

    #headphoneVector {
        margin: 1.9vw;
    }

    #ytGraphic, #ytGraphic2 {
        height: 45.8vw;
        width: 78vw;
    }

    #ytGraphic2 {
        margin-left: 0vw;
        visibility: hidden;
        width: 0vw;
    }

    .vEmbedOne {
        background: rgb(77, 77, 77);
        width: 74vw;
        height: 41.8vw;
        font-size: 4.5vw;
        margin-top: 2vw;
        margin-left: 2vw;
    }

    #yt_container2 {
        width: 0vw;
    }

    .loadVideo {
        padding-top: 17vw;
    }

    .cardTitle {
        font-size: 3.5vw;
        padding-left: 2vw;
        padding-right: 2vw;
    }

    #graphicImgConBlog {
        width: 75vw;
        padding: 3vw;
    }

    #blogGraphic {
        width: 75vw;
        height: 40vw;
        padding: 2vw;
    }

    .cardDescription {
        font-size: 2.5vw;
        margin-top: 1vw;
        padding-left: 2vw;
        padding-right: 2vw;
    }

    #ytCon, #liCon, #fbCon {
        margin-top: 3vw;
    }

    #liCon, #fbCon {
        margin-left: 2vw;
    }

    #footer {
        display: inline-block;
        width: 100%;
    }

    .footerTitles {
        font-size: 3.8vw;
    }

    #footerCol1, #footerCol2, #footerCol3 {
        margin-left: 8vw;
        margin-top: 4vw;
    }

    #footerCol1 {
        margin-left: 4vw;
    }

    .subList {
        margin-top: 1vw;
        font-size: 3vw;
        line-height: 4.5vw;
        width: 25vw;
    }

    #credits {
        width: 60vw;
        margin-left: 6vw;
        margin-top: 3vw;
    }

    #copyright {
        font-size: 3vw;
    }

    #designer {
        font-size: 3.5vw;
    }

    #footerColLast {
        width: 80vw;
        margin-top: 7.2vw;
        margin-left: 6vw;
        text-align: center;
        margin-bottom: 3vw;
    }

    #newsletter {
        font-weight: 600;
        font-size: 3.5vw;
    }

    #newsLetterDes {
        margin-top: 0.8vw;
        font-size: 3vw;
    }

    #logoText {
        padding-top: 0vw;
        width: 36vw;
        height: 5vw;
    }

    #inputContainer {
        display: flex;
        background: white;
        width: 40vw;
        margin: auto;
        margin-top: 3vw;
    }

    #emailImgDiv {
        width: 8vw;
        margin-top: 1.3vw;
        margin-left: 0.4vw;
    }

    #subscribeBtn {
        font-size: 3vw;
        padding: 1.5vw;
        margin-top: 2.5vw;
    }

    #inputField {
        font-size: 3vw;
        width: 32vw;
        height: 7.1vw;
    }

    #blogCon, #tuteCon, #technfactCon {
        height: 43vw;
        margin-top: 6vw;
    }

    .cardImgCon {
        margin-top: 3vw;
    }

    li {
        padding-top: 2vw;
    }

    .listStyle {
        margin-top: 6vw;
    }

    .listTitle {
        font-size: 3.5vw;
        margin-top: 1vw;
    }

    .listElements {
        height: 22vw;
        margin-bottom: 2vw;
        box-shadow: 0vw 0vw 0.4vw rgb(173 173 173);
    }

    .listContent {
        margin-top: 1vw;
        font-size: 2.5vw;
    }

    .listImg {
        width: 78vw;
        vertical-align: middle;
        margin-top: 4vw;
        margin-left: 1vw;
        margin-right: 1vw;
    }
}