/* Nav bar for mobile starts */
body{
    overflow-x: hidden;
}
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    background-color: white;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}
.topfixedbar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: white;
    z-index: 100;
}



    .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }

        .sidenav a:hover {
            color: black;
        }

    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }

#main {
    transition: .5s;
    
    box-shadow: -2px -2px 2px black;
}

@media screen and (max-width: 450px) {
    .sidenav {
        padding-top: 15px;
    }

        .sidenav a {
            font-size: 18px;
        }
     }
/* Nav bar for mobile Ends */

/* ------------------------------------------------------------------------------------------------------HOme page starts */
/* For effect starts */
.stich1 {
    /* place on the bottom */
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
}

.loginfill {
    background: transparent;
    border-radius: 0px;
    border: none;
    border-bottom: dotted 2px black;
    
}

.homecapabilitiescol{
    padding: 10px; max-height: 55vh; margin-top:40px; transition: .5s;
}
.homecapabilitiescol:hover{
    cursor: pointer;
    transform: translateY(-10px); height: 55vh;
}
.hovereffectimage{
    width: 45vh;
    transition: .5s;
}
.homecapabilitiescol:hover .hovereffectimage{
    transform: translateX(-20px);
}

.fab {
    font-size: 33px;
    margin-right: 5px;
}
@media screen and (max-width: 990px) {
    .HideInPhone {
        display: none;
    }
    .h4style{
        color: rgb(70, 68, 68); width: 170%;
    }
}
@media screen and (min-width: 990px) {
.h4style{
color: rgb(70, 68, 68); width: 100%;
}
}
.vision::first-letter {
    font-size: 30px;
    color: #632B2B;
}

@media screen and (min-width: 990px) {
    .HideInDesktop {
        display: none;
    }
}
/* For effect ends */
/* For header starts */
.Headermainheading{
    font-weight: 800; font-size: 55px;
}
.headerlightheading{
    font-family: 'Noto Sans JP', sans-serif; margin-bottom: -5px
}
.headerimg{
    width: 35vw;
}
@media screen and (max-width: 990px) {
    .headerimg{
        width: 70vw;
        margin-top: -150px;
    }
    .headerlightheading{
        font-family: 'Noto Sans JP', sans-serif; margin-bottom: -5px; font-size: 19px;
    }
    .Headermainheading{
        font-weight: 700; font-size: 30px;
    }
    .VRheader{
        font-size: 20px;
        margin-top: 0px;
    }
    .aboutuscontent{
        margin-top: 10vh;
    }
    .marginleftphone{
        margin-left: 70px;
    }
}
/* For header ends */
/* What we do starts */
.wedoimg{
    width: 35vw;
}
.wedoheading{
    font-weight: 800; font-size: 45px; 
}
.wedosec{
    padding-right: 80px; 
}
.wedocontent{
    font-family: 'Noto Sans JP', sans-serif; margin-bottom: -5px; font-size: 20px;
}
@media screen and (max-width: 990px) {
    .wedocontent{
        font-family: 'Noto Sans JP', sans-serif; font-size: 16px;
    }
    .wedosec{
        padding-right: 0px; 
    }
    .wedoimg{
        width: 90vw;
        margin-top: -100px;
        margin-left: -50px;
    }
    .wedoheading{
        font-weight: 700; font-size: 25px; margin-top: 40px;
    }
}
/* What we do ends */
/* wordpress statrs */
.wpheading{
    font-family: 'Noto Sans JP', sans-serif; margin-bottom: -5px;
}
.wppara{
    margin-top: 30px;
}
.wpimg{
    width: 40vw
}
.wpcol{
    padding-right: 80px
}
@media screen and (max-width: 990px) {
    .wpheading{
        font-family: 'Noto Sans JP', sans-serif; margin-bottom: -5px; font-size: 28px;
    }
    .wppara{
        margin-top: 30px;
        font-size: 17px;
    }
    .wpimg{
        width: 80vw;
        margin-left: -40px;
    }
    .wpcol{
        padding-right: 0px
    }
}
.dividers{
    border: 1px dotted white;
} 
.hoverchange{
    margin-top: 10px;
}
.hoverchange:hover .dividers{
    border: 1px solid #632B2B;
}
  
  .steptext{
    color: #632b2bd0;
}
  
  .hoverchange:hover .steptext{
    color: #632B2B;
}
  

/* wordpress ends */
/* For Experience start */
.experienceheading{
    font-size: 95px; margin-top: 4vh; font-family: 'Passion One', cursive;opacity: .7; padding-top: 25vh; 
}
.experiencecontent{
    margin-top: -20px;
}
@media screen and (max-width: 990px) {
    .experienceheading{
        font-size: 58px; margin-top: 4vh; font-family: 'Passion One', cursive;opacity: .7; padding-top: 25vh; 
}
.experiencecontent{
        margin-top: -20px;
        font-size: 17px;
}
}
/* For Experience ends */
/* clients starts */
.clientsection{
    background-image: url(Images/reviewsbg.png); background-position:center;background-size: cover ; height: 100vh; background-color: #FFC2B4; color: black; z-index: 4; 
}

@media screen and (max-width: 990px) {
    .clientsection{
        background-image: url(Images/reviewphone.png); background-position:right;background-size: cover ; height: 100vh; background-color: #FFC2B4; color: black; z-index: 4; 
    }
}
/* clients ends */
/* contact us starts */
.contactusheading{
    font-size: 45px; margin-top: 10vh;font-family: 'Pacifico', cursive;
}
@media screen and (max-width: 990px) {
    .contactusheading{
        font-size: 45px; margin-top: 20vh;font-family: 'Pacifico', cursive; 
    }
}
/* contact us end */
/* fotter starts */
.footersection{
     background-position:top;background-size: cover ; height: 50vh;  color: #fff; z-index: 1;
}
.footersec2{
    padding-top: 5vh;
}
.fottermaincontent{
    background-image: linear-gradient(270deg, #250E62, #3a179b); float: left; height: 70vh;
  }
  .marwari{
    text-decoration: none; color: #fff; margin-top: 200px;
}
@media (max-width: 991px)
{
    .milestone{
        left: 18%;
    }
    .marwari{
        text-decoration: none; color: #fff; margin-top: 280px;
    }
  .fottermaincontent{
    background-image: linear-gradient(270deg, #250E62, #250E62); float: left; height: 50vh;
  }
}
@media screen and (max-width: 990px) {
    .footersection{
         margin-top: 60px;background-position:top;background-size: cover ; height: 70vh; color: black; z-index: 1; color: white;
    }
    .footersec2{
        padding-top: 0vh;
    }
}
/* fotter ends */
/* For Modal Popups starts */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 3; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    -webkit-animation-name: fadeIn; /* Fade in the background */
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.5s
}

/* Modal Content */
.modal-content {
    position: fixed;
    bottom: 0;
    background-color: #fefefe;
    min-height: 85vh;
    width: 100%;
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.5s;
    animation-name: slideIn;
    animation-duration: 0.5s
}

.modalteamimage {
    width: 20vw;
    padding: 20px;
}

.modal-header {
    padding: 2px 16px;
    background-image: url(/WebsiteImages/modalbackground.png);
    background-size: cover;
    height: 15vh;
    color: white;
    font-weight: 700;
}

.modal-body {
    padding: 2px 16px;
}

@-webkit-keyframes slideIn {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

@keyframes slideIn {
    from {
        top: -300px;
        opacity: 0
    }

    to {
        top: 0;
        opacity: 1
    }
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}
/* For Modal Popups ends */


/* ----------------------------------- About Us starts */


/* ------------------------------------------------------------------------------- HOme pAge ENds */
/* ------------------------------------------------------------------------------- Contact Us Page Starts */
.contactuspageheading{
    font-family: 'Pacifico', cursive; font-size: 60px;
}
.contactussubheading{
    font-size: 20px;font-family: 'Pacifico', cursive;
}   
.contactuspagesec{
    height: 90vh;z-index: 7; background-image: url(/Images/countactuspage.png); background-position: top; background-size: cover; 
}
.contactuspagesec2{
    height: 100vh;  color: black; z-index: 3; background-color: #E8F1E3; 
}
.contactuspagesec3{
    height: 100vh; color: black; z-index: 2; background-color: #E8F1E3; 
}
@media screen and (max-width: 990px) {
    .contactuspageheading{
        font-size: 55px; margin-top: 40vh;font-family: 'Pacifico', cursive; 
    }
    .contactuspagesec{
        height: 90vh;position: relative;z-index: 7; background-image: url(/Images/contactuspagephone.png); background-position: top; background-size: cover; 
    }
}


.mobilehome2{
padding: 25px;
height: 55vh; 
background-image: linear-gradient(225deg, #133984, #086fbd);
overflow: hidden;
color: #4B39B5;
}
.mobilehome4{
    color: #fff;
}
.mobilehome5{
    color: #fff;
}
.mobilehome7{
    float: left;
    text-align: center;
    max-width: 31%;
    margin-left: 2.333333%;
}
.mobilehome8{
    background-color: lightgrey;
    border: 2px solid #ddd;
    border-radius: 5px;
    padding: 40px;
}
.mobilehome9{
    float: left;
    text-align: center;
    max-width: 31%;
    margin-left: 2.333333%;
    margin-top: -100px;
}
.mobiledigital1{
    margin-top: 10%;
    margin-left: 1px;
    padding: 50px;
    background-color: rgb(107, 107, 107,0.5);
}
.mobiledigital2{
    float: left;
    max-width: 41.666667%;
}
.mobiledigital3{
    
    max-width: 58.333333%;
margin-left: 200px;
}
.mobiledigital4{
    max-width: 41.666667%;
}
.mobiledigital5{
    max-width: 58.333333%;
}
.mobileviewheader{
    background-color: #250E62;
     height: 84vh;
}
@media screen and (max-width: 990px) {
    .mobileviewheader{
        background-color: #250E62;
         height: 100vh;
    }
    .mobilehome1{
top: 20%;
    }
    .mobilehome2{
        height: 70vh;
        
    }
    .hovereffectimage{
        width: 25vh;
    }
   .mobilehome3{
       margin-bottom: 100px;
       padding-bottom: 100px;
   }
   .mobilehome4{
       width: 280px;
       color: #fff;
   }
   .mobilehome5{
    width: 280px;
    color: #fff;
}
.mobilehome6{
    margin-top: 260px;
    margin-left: -140px;
}
.mobilehome7{
    float: none;
    text-align: center;
    max-width: 100%;
    margin-top: 20px;
}
.mobilehome8{
    background-color: lightgrey;
    border: 2px solid #ddd;
    border-radius: 5px;
    padding: 40px;
}
.mobilehome9{
    float: none;
    text-align: center;
    max-width: 100%;
    margin-top: 20px;
}
.mobiledigital1{
    max-width: 80%;
    padding: 50px;
    background-color: rgb(107, 107, 107,0.5);
    margin-top: 100px;
}
.mobiledigital2{
    float: left;
    max-width: 100%;
}
.mobiledigital3{
    text-align: left;
    max-width: 100%;
    margin-left: 0px;
}
.mobiledigital4{
    max-width: 100%;
}
.mobiledigital5{
    max-width: 100%;
}
}

.column4{
    float: left;
}
.rowsection{
    padding: 100px;
}
.started{
    text-align: center;
     padding: 70px;
      margin-left: 400px;
       color: #fff;
}
.homepage2{
    padding: 250px 100px 100px 80px;
     color: white;
}
.home2style{
    padding:0px 50px;
     background-color: #FECFBD; 
     margin-right: 0;
      margin-left: 0;
}
.home3style{
    padding: 50px 80px 20px 100px;
}
.column6{
    padding-left: 100px;
    padding-right: 70px;
    flex: 0 0 50%;
    max-width: 50%;
    float: left; 
    width: 50%;
}
.column7{
   
    padding-right: 70px;
    flex: 0 0 50%;
    max-width: 50%;
    float: left; 
    width: 50%;
}
.imagestyle1{
    width: 90%;
    padding-left: 100%;
}
.imagestyle{
    width: 100%;
}
.image{
    width: 100%;
height: 70vh;
}
.colstyle{
    float: left; text-align: center;
}
.home2image{
    margin-left: 150px;
}
.home2divstyle{
    float: left; width: 30%; padding-left: 70px;margin-left: 150px; margin-right: 100px;
}
.designed{
    padding: 0 100px;
}
.designed1{
    text-align: center; padding: 0 150px 0 150px;
}
.designed2{
    padding: 0 150px 0 100px;
}
.imagestyling{
    margin-left: 150px;
}
.imagestyling2{
    float: left; width: 30%;margin-left: 150px; margin-right: 100px;
}
.servicestyle{
    background-color: rgb(249,66,58); text-align: center; color: white; padding: 10px; width: 26%; border-radius: 20px;
}
.buttonstyle{
    width: 40%;
     border-radius: 30px;
}
@media screen and (max-width: 990px) {
    .buttonstyle{
        width: 60%; 
        border-radius: 30px;
    }
    .servicestyle{
        background-color: rgb(249,66,58); text-align: center; color: white; padding: 5px; width: 70%; border-radius: 20px;
    }
    .imagestyling{
        margin-left: 70px;
    }
    .imagestyling2{
        float: left; width: 30%; padding-left: 0;margin-left: 70px; margin-right: 100px;
    }
    
  .fontsizeheading{
      font-size: 26px;
      width: 100%;
  }

    .designed2{
        padding: 0 50px 0 50px;
    }
    .designed1{
        text-align: center; padding: 0 50px 0 50px;
    }
    .designed{
        padding: 0 15px;
    }
    .colstyle{
        float: none; text-align: center;
    }
    .home2divstyle{
        float: left; width: 30%; padding-left: 0;margin-left: 65px; margin-right: 100px;
    }
    .home2image{
        margin-left: 65px;
    }
    .started{
        text-align: center;
         padding: 70px;
          margin-left: 20px;
           color: #fff;
    }

    .column4{
        float: none;
    }
    .rowsection{
        padding: 50px;
        /* width: 150%; */
    }
    .homepage2{
        padding:200px 20px 80px 20px;
         color: white;
    }
    .home2style{
       
         background-color: #FECFBD; 
         margin-right: 0;
          margin-left: 0;
    }
    .home3style{
        padding: 50px 40px 20px 40px;
    }
   
    .column6{
        padding-left: 50px;
        padding-right: 50px;
        flex: 100%;
        max-width: 95%;
        float: left; 
        width: 50%;
    }
    .column7{
        padding-left: 50px;
        padding-right: 50px;
        flex: 100%;
        max-width: 95%;
        float: left; 
        width: 50%;
    }
    .imagestyle{
        width: 240%;
        padding: 50px;
    }
    .imagewidth{
        width: 130%;
        padding: 50px;
    }
    .imagestyle1{
        width: 90%;
        padding: 50px;
    }
    .image{
        width: 100%;
    height: 70vh;
    margin-top: 50px;
    }
   
}

.collegelgogdiv{
    height: 20vh; 
    /* background-image: linear-gradient(90deg,#FF3448, #FF9A26); */
    background-color: #fff;
}
.collegelgogdiv div img{
    width: 9vw;
}
.brand1{
    color: #FF3448; width: auto;
}
.brand2{
    float: left;
    width: 100%;
}


@media only screen and (max-width: 990px) {
  
    .brand1{
        color: #FF3448; width: 280%;
    }
    .brand2{
        float: left; width: 170%;
    }
    
    .collegelgogdiv div img{
        width: 25vw;
    }
    .collegelgogdiv{
        height: 10vh; background-image: linear-gradient(90deg,#FF3448, #FF9A26);
    }
}


/* floating icon css start */

.icon-bar {
    z-index: 25;
  position: fixed;
  top: 50%;
  right:0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.icon-bar a {
  display: block;
  text-align: center;
  padding: 10px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}


.icon-bar a:hover {
    background-color: #fff;
    border: 1px solid #818181;
    color: #818181;
  }

.whats {
  background: #25D366;
  color: white;
}

.email {
  background: #D44638;
  color: white;
}
    

/* floating icon css end */




/* fixed nav css start */

.footercardetails{
    height: 18vh;
}
.imagecar{
   
    width: 100%;
}
.divfixed{
    border-top: 2px solid rgb(19,57,132);
    padding: 20px;
    padding-top: 0;
    position: fixed; 
    bottom: 0; 
    width: 100vw;
    z-index: 100; 
    background-color: #fff; 
    padding-bottom: 0; 
    margin-bottom: 0;
}
.div1{
    padding-top: 20px;
}
.Pclass{
    text-align: center;
}
.divstyle{
    padding-top: 20px;
}
@media (max-width: 990px)
    {
        .footercardetails{
            height: 10vh;
        }
        .imagecar{
            max-width: none;
            width: 40px;
        
        }
        .divfixed{
            border-top: 2px solid rgb(19,57,132);
            
           
            position: fixed; 
            bottom: 0; 
            width: auto;
            z-index: 100; 
            background-color: #fff; 
          
            overflow-y: scroll;
        }
        .div1{
            padding-top: 20px;
            /* margin-left: 30px; */
            margin-right: -8px;
            /* float: left; */
           
        }
        .divscroll{
            height: 12vh;
            overflow-y: hidden;
            overflow-x: hidden;
            width: 103vw;
        }
        .divstyle{
            padding-top: 20px;
            margin-left: -30px;
        }
        .Pclass{
            text-align: center;
            font-size: 13px;
        }
    }
/* fixed nav css end */