html{
    scroll-behavior: smooth;
}
#topBtn{
    left: 50%;
    transform: translate(-50%, -10px);
    position: absolute;
    margin-top: 17px;
    background-color: #767676;
    font-size: 1.375rem;
}
.col-sm-5{width: 51%;}
.col-sm-7{width: 30%;}
.col-sm-7-cards{
    display: flex;
    margin: 5%;
    gap: 3%;
    justify-content: center;
    width: 14%;
}
.buttonpadding{
height: 6rem;
line-height: 1.3rem;
}

.embed-responsive{
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%;
}
.embed-responsive-item{
    position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
.row-noFLex{
    width: 80%;
    margin-left: 50%;
    transform: translate(-50%);
    margin-top: 2%;
}
.row{
    width: 150%;
margin-left: 50%;
transform: translate(-50%);
align-items: center;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
/* align-content: center; */
justify-content: center;
text-align: center;
gap: 15px;
padding-bottom: 7%;
}
section{
    position: relative;
z-index: -1;
}

.section, h1,p {
height: 100%;
font-family: 'Open Sans', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
line-height: 100%;
}

.landingPage{
padding: 6% 0 10% 0;
text-align: center;
/* background-position-y: -200px; */
margin-top: -12px;

}
#landingPageHome{

background-image: url('../img/icons/lpBG.png');
clip-path: polygon(0 0,100% 0,100% calc(100% - 85px),50% 100%,0 calc(100% - 85px));
background-size: cover;
}
#howItsUsed{
background-image: url('../img/icons/processBG.png');
/* background-position-y: 800px; */
/* -webkit-transform: skewY(-2deg);
-moz-transform: skewY(-2deg);
-ms-transform: skewY(-2deg);
-o-transform: skewY(-2deg);
transform: skewY(-2deg); */
clip-path: polygon(0 0,50% 85px,100% 0,100% 100%,0 100%);
  margin-top: -85px;
  background-size: cover;
}



#history{
background-image: url('../img/icons/spaceBG.png');
padding: 6% 0 0 0;
background-size: cover;
clip-path: polygon(0 0,100% 0,100% 100%,0 calc(100% - 70px));
clip-path: polygon(0 0,100% 0,100% calc(100% - 85px),50% 100%,0 calc(100% - 85px));
}
#timeLine{
    background-image: url('../img/icons/processBG.png');
    padding: 6% 0 0 0;
    background-size: cover;
    
    clip-path: polygon(0 0,50% 85px,100% 0,100% 100%,0 100%);
  margin-top: -85px;
    }	
#process{
background-image: url('../img/icons/processBG.png');
padding: 6% 0 0 0;
/* clip-path: polygon(0 0,100% 70px,100% 100%,0 100%);
margin-top: -70px; */
}
#bts{
background-image: url('../img/icons/btsBG.png');
padding: 6% 0 0 0;
}
.section{
background-size: cover;
margin-top: -13px;;
height: 100%;

}
#faces{
background-image: url('../img/icons/lpBG.png');
padding: 6% 0 0 0;
}
body,html {
margin: 0;
position: relative;
z-index: -3;

}
.ulCenter{
display: table;
margin-left: 50%;
transform: translate(-50%, 10px);
font-size:1.7rem;
font-style: italic;
font-weight: 700;
line-height: 3.3rem;


}
/* ul { 

padding: 0; 
list-style: none; 
display: table;

text-align: center;
}
li { 
display: table-cell; 
position: relative; 

} */

.landingPage h1{
text-align: center;
 line-height: 3.5rem;
font-weight: 800;
font-size: 3.5em;
margin-top: 3rem;

}
.landingPage p{
        color: #333333;
        font-weight: 400;
        font-size: 1.375rem;
        line-height: 1.975rem;
            }
#landingPage .container{
/* transform: translate(0px,5%) !important; */
}
#history h1{
color: #fff;
font-weight: 800;
font-size: 3.5em;
margin-top: 0px;
line-height: 100%;
    }
    #history p{
        color: #fff;
        font-weight: 400;
        font-size: 1.2em;
   }
   #timeLine h1{
    color: #fff;
    font-weight: 800;
    font-size: 3.5em;
    margin-top: 0px;
    line-height: 100%;
    margin-top: 3rem;
        }
        #timeLine p{
            color: #fff;
            font-weight: 400;
            font-size: 1.2em !important;
       }
   .noSkew{


/* -webkit-transform: skewY(2deg);
-moz-transform: skewY(2deg);
-ms-transform: skewY(2deg);
-o-transform: skewY(2deg);
transform: skewY(2deg); */
}


   .container{
/* transform: translate(0px,45%) !important; */
}

#process h1{
    color: #fff;
    font-weight: 800;
    font-size: 3.5em;
    margin-top: 0px;
    line-height: 100%;
font-family: 'Open Sans', sans-serif; 
    }
    #process p{
        color: #fff;
        font-weight: 400;
        font-size: 1.375em;
            }
            #bts h1{
                color: #fff;
                font-weight: 800;
                font-size: 3.5em;
                margin-top: 0px;
                    }
                    #bts p{
                        color: #fff;
                        font-weight: 400;
                        font-size: 1.375em;
                            } #faces h1{
                                color: #fff;
                                font-weight: 800;
                                font-size: 3.5em;
                                margin-top: 0px;
                                    }
                                    #faces p{
                                        color: #fff;
                                        font-weight: 400;
                                        font-size: 1.375em;
                                            }
.active{
border-bottom: 2px solid white;
color: aqua;
}
/*
.thumbnail{
box-shadow:13px 14px 13px -10px rgba(0,0,0,0.4),-11px -12px 13px -13px #ffffff !important;
border: none !important;
border-radius: 20px !important;
background: none !important;
line-height: 10 !important;
text-align: center;

}
.thumbnail:hover{
margin-top: -10px;
transition: ease-in  .25s;
}
.thumbnail.soon {
background: linear-gradient(154deg, #2d98d4 , #00579b 131%) !important;

}
.soon h1 {
color: white;
font-weight: 600 !important;
}
.soon h3{
color: white;
font-weight: 300;
}
.thumbnail.whatsNew {
background: linear-gradient(154deg,  #2d98d4 , #00579b 131%) !important;
color: white !important;

}
.whatsNew h1 {
color: white;
font-weight: 600 !important;
}
.whatsNew h3{
color: white;
font-weight: 300;
}
.cardButton{
margin: 1.5em;
border-radius: 1em;
border: none;
padding: 0 1em;
line-height: 2;
font-size: 1.25em;
font-family: inherit;
font-weight: 500;
text-shadow: 0 0.125em 0.3125em rgba(0,0,0,.2);
background: white;
color: rgb(0, 0, 0);
}
.cardButton:hover{
box-shadow:13px 14px 13px -10px rgba(0,0,0,0.25)!important;
transition:  linear .25s;

} */
@media only screen and (max-width: 1400px) {
.container{
    /* transform: translate(0px,15%) !important; */
}
#process p{
    color:#fff;
    font-weight: 400;
    font-size: 1.375em;
        }
        #process h1{
            color: #fff;
            font-weight: 800;
            font-size: 3.5em;
            margin-top: 0px;
                }
                #landingPage{
                    overflow: none;
                }
                #history{
                    overflow: none;
                }
                #process{
                    overflow: none;
                }
                #bts{
                    overflow: none;
                }
}
@media only screen and (max-width: 767px) {
.container{
    /* transform: translate(0px,15%) !important; */
}
#process p{
    color:#fff;
    font-weight: 400;
    font-size: 1.375em;
        }
        #process h1{
            color: #fff;
            font-weight: 800;
            font-size: 3.5em;
            margin-top: 0px;
                }
                #landingPage{
                    overflow: none;
                }
                #history{
                    overflow: none;
                }
                #process{
                    overflow: none;
                }
                #bts{
                    overflow: none;
                }
}



/* cards css */
.op-view-Card{
transition: all 1s ease-in-out;
}
.op-view-Card:hover{
transform: scale(1.02);
 -webkit-box-shadow: -1px 20px 8px -16px rgba(0,0,0,0.24);
 -moz-box-shadow: -1px 20px 8px -16px rgba(0,0,0,0.24);
 box-shadow: 15px 19px 8px -16px rgba(0,0,0,0.25);
}

.landingPage-Card {
width: 100%;
/* height: 215px; */
background-color: #f1f1f1;
margin-bottom: 10px;
transition: top .25s, box-shadow .26s;
border-radius: 11px;
/* display: flex; */
/* justify-content: center;
flex-direction: column; */
}
.thumbnail {
border-radius: 9px;
margin: 5px 5px 15px 5px;
/* display: flex;
justify-content: center; */
}
.thumbnail> img {
border-radius: 10px;
width: 100%;
}

.cardsButton {
background-color: #0d76bd;
color: #ffffff !important;
display: inline-block;
padding: 6px 12px;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
border-radius: 4px;
margin: 0 20px 10px 20px;
text-decoration: none !important;
width: 14vw;
transition: all 0.2s ease-in-out;
}

.cardsButton:hover {
    background-color: #0c558b;
}