/*****RJ Stylesheet 2021****/
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/**********

RESET CSS

**************/

body {
    background: #fff;
  font-family: 'Roboto', sans-serif;   
    width: 100%;
    font-size: 16px;
    padding: 0px;
    overflow-x: hidden;
    color:#333;
}
ul,li {
    padding-left:15px;
    font-size: 16px;
  font-family: 'Roboto', sans-serif;
}
h1,h2, h3, h4{
   font-family: 'Roboto', sans-serif;
}
a:hover{
    color: #1976d2;
    text-decoration: none;
}
.pdlr{
    padding:0;
}
.pdl{
    padding-left: 0;
}
.pdr{
    padding-right: 0;
}
p{
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
  font-family: 'Roboto', sans-serif;
/*word-break: break-all;*/
}

.all-text-center{
    text-align: center;
    padding: 22px;
    background: #fff;
    display: inline-block;
        box-shadow: 0 0 7px rgb(0 0 0 / 20%);
        background: url(../img/bg-pattern.jpg);
        background-size: cover;
        background-position: center;
        color: #fff;
}
.all-text-center ul li{
    text-align: left;
}

.form-control{ 
    border-radius: 5px;
    margin: 10px 0;
    width: 100%;
    display: inline-block;
}
.contact-form-onboard{
    background:#54a6bb;
    padding: 30px;
    color: #fff;
}
.form-bg-div{
     background: #152374;
    padding: 25px;
    display: inline-block;
    color: #fff;
    box-shadow: 0 0 7px rgb(0 0 0 / 20%);
}
.blackbg{
        background: #fff;
    color: #333;
    padding: 15px;
    border-radius: 10px;
     display: inline-block;
     height:495px;
}

.row-22, .row-33, .row-44, .row-55, .row-66{
    margin-bottom: 7px;
    display: inline-block;
    width: 100%;
}
.csstransform h3{
    font-size: 20px;
}
.row-22 .csstransform{
    background-image: linear-gradient(0deg, #f44336, #ff9800);
    color: #fff;
    height: 80px;
    vertical-align: middle;
    padding-top:1px ;
    margin: 0;
    border-radius: 10px 0 0px 10px;

}

.row-22 p{
    height: 80px;
    vertical-align: middle;
    padding: 15px;
    background: #fff;
    color: #333;
    border-radius: 0px 10px 10px 0px;
}
.row-33 .csstransform{
    background-image: linear-gradient(0deg, #ff9800, #ffc107);
    color: #fff;
    height: 80px;
    vertical-align: middle;
    padding-top:6px ;
    margin: 0;
    border-radius: 10px 0 0px 10px;
}
.row-33 p{
    height: 80px;
    vertical-align: middle;
    padding: 15px;
    background: #fff;
    color: #333;
    border-radius: 0px 10px 10px 0px;
}
.row-44 .csstransform{
    background-image: linear-gradient(0deg, #3f51b5, #2196f3);
    color: #fff;
    height: 80px;
    vertical-align: middle;
    padding-top:1px ;
    margin: 0;
    border-radius: 10px 0 0px 10px;
}
.row-44 p{
    height: 80px;
    vertical-align: middle;
    padding: 15px;
    background: #fff;
    color: #333;
    border-radius: 0px 10px 10px 0px;
}
.row-55 .csstransform{
    background-image: linear-gradient(0deg, #673ab7, #9c27b0);
    color: #fff;
    height: 80px;
    vertical-align: middle;
    padding-top:1px ;
    margin: 0;
    font-size: 22px;
    border-radius: 10px 0 0px 10px;
}
.row-55 p{
    height: 80px;
    vertical-align: middle;
    padding: 15px;
    background: #fff;
    color: #333;
    border-radius: 0px 10px 10px 0px;
}
.row-66 .csstransform{
    background-image: linear-gradient(0deg,#e91e63, #f44336);
    color: #fff;
    height: 80px;
    vertical-align: middle;
    padding-top:1px ;
    margin: 0;
    font-size: 22px;
    border-radius: 10px 0 0px 10px;
}
.row-66 p{
    height: 80px;
    vertical-align: middle;
    padding: 15px;
    background: #fff;
    color: #333;
    border-radius: 0px 10px 10px 0px;
}
/*for iphone 6/7/8 plus & pixel 2 , pixel 2 xl*/
@media  (min-width: 411px) and (max-width:  731px){
.row-22 h3, .row-33 h3, .row-44 h3, .row-55 h3{
    font-size: 15px;
    transform: rotate(270deg);
    position: absolute;
    left: 0;
    right: 0;
    top: 18px;
}
.row-66 h3{
    font-size: 15px;
    transform: rotate(270deg);
    position: absolute;
    left: 0;
    right: 0;
    top: 17px;
}
.row-22 .csstransform, .row-33 .csstransform, .row-44 .csstransform, .row-55 .csstransform, .row-66 .csstransform{
    height: 100px;
}
.row-22 p, .row-33 p, .row-44 p, .row-55 p, .row-66 p{
    height: 100px;
    padding: 7px;
    
}
}
/* for Iphone X*/
@media  (min-width: 375px) and (max-width: 812px){

.row-22 h3, .row-33 h3, .row-44 h3, .row-55 h3{
    font-size: 15px;
    transform: rotate(270deg);
    position: absolute;
    left: 0;
    right: 0;
    top: 18px;
}
.row-66 h3{
    font-size: 15px;
    transform: rotate(270deg);
    position: absolute;
    left: 0;
    right: 0;
    top: 17px;
}
.row-22 .csstransform, .row-33 .csstransform, .row-44 .csstransform, .row-55 .csstransform, .row-66 .csstransform{
    height: 100px;
}
.row-22 p, .row-33 p, .row-44 p, .row-55 p, .row-66 p{
    height: 100px;
    padding: 7px;
    
}
}
/*for Galaxy s5*/
@media (min-width: 360px) and (max-width: 640px){
.row-22 h3, .row-33 h3, .row-44 h3, .row-55 h3{
    font-size: 15px;
    transform: rotate(270deg);
    position: absolute;
    left: 0;
    right: 0;
    top: 18px;
}
.row-66 h3{
    font-size: 15px;
    transform: rotate(270deg);
    position: absolute;
    left: 0;
    right: 0;
    top: 17px;
}
.row-22 .csstransform, .row-33 .csstransform, .row-44 .csstransform, .row-55 .csstransform, .row-66 .csstransform{
    height: 100px;
}
.row-22 p, .row-33 p, .row-44 p, .row-55 p, .row-66 p{
    height: 100px;
    padding: 7px;
    
}
}

/*for iphone5*/
@media (min-width: 320px) and (max-width: 568px){
.row-22 h3, .row-33 h3, .row-44 h3, .row-55 h3{
    font-size: 15px;
    transform: rotate(270deg);
    position: absolute;
    left: 0;
    right: 0;
    top: 18px;
}
.row-66 h3{
    font-size: 15px;
    transform: rotate(270deg);
    position: absolute;
    left: 0;
    right: 0;
    top: 17px;
}
.row-22 .csstransform, .row-33 .csstransform, .row-44 .csstransform, .row-55 .csstransform, .row-66 .csstransform{
    height: 100px;
}
.row-22 p, .row-33 p, .row-44 p, .row-55 p, .row-66 p{
    height: 100px;
    padding: 7px;
    
}
}