.top-bar{
      width: 100%;
      height: 45px;
      background: #323232;
      padding: 0 8em;
         
    }
   
    .top-bar .social{
      height: 45px;
      color: #fff;
      min-width: 55px;
      display: table-cell;
      padding: 0 16px;
      font-size: 1.4em;
      border-left: 1px solid rgba(255,255,255,0.1);
      vertical-align: middle;
    transition: background .15s ease-out;

    }
  .noborder{
    border: none !important; 
  }
    a.fb:hover{
      background: #3b5999;
    }
    a.twitter:hover{
      background: #55acee;
    }
     a.google:hover{
      background: #dd4b39;
    }
     a.github:hover{
      
    }
     a.youtube:hover{
      background: #cd201f;
    }
     a.linkedin:hover{
      background: #0077B5;
    }
    a.linkedin{
      border-right: 1px solid rgba(255,255,255,0.2);
    }
span.sm{
  font-size: 12px;
  color: #eee;
  padding-top: -3px;
  margin-left: 3px;
}
a:hover{
  text-decoration: none;
}
.contactnow{
  background: #D66D00;
}
nav.navbar-default{
   min-height: 80px;
   border-radius: 0;
   background: #fff;
   font-weight: bolder;
   margin-bottom: 0;
}

.navbar-default .navbar-nav > li > a {
    padding-top: 0px;
    padding-bottom: 0px;
    line-height: 80px;
}

@media (max-width: 767px) {

   .navbar-default .navbar-nav > li > a {
    line-height: 20px;
    padding-top: 10px;
    padding-bottom: 10px;}
    .nav-rg{
  padding-left: 1em;
}
}

nav.navbar img.logo{
  margin-top: 12px;
}

.nav-rg{
  padding-left: 5em;
}
.navbar-nav > li > a:hover{
   color: #D66D00;

}
.navbar-default .navbar-nav > .active{
   color: #D66D00;
   background: #fff;
 }
 .navbar-default .navbar-nav > .active > a, 
 .navbar-default .navbar-nav > .active > a:hover, 
 .navbar-default .navbar-nav > .active > a:focus {
      color: #D66D00;
      background: #fff;
 }
 div.slider{
  height: 480px;
  background: #F0F5FB;
 }
 div.topservices{
  background: #F6F6F4;
  min-height: 450px;

 }
  div.workingprocess{
  background:url(../images/process-bg.png) 50% 8em no-repeat;
  min-height: 450px;

 }
 a.scrolltotop >span{
  display: block;

 }
 a.scrolltotop{

  text-align: center;
background: rgba(50,50,50,0.9);
color: #fff;
padding:5px 16px ;
position: absolute;
left: 12px;
position: fixed;
bottom: 12px;
width: 65px;
z-index: 23;
height: 56px;
cursor: pointer;
 }
 .navbar-inverse{
  background: #fff;
  border: none;
  border-bottom: 2px solid #eee;
  border-radius: 0;
 }
 .navbar-inverse a.navbar-brand{
  color: #fff;
 }
 .navbar-inverse a{
  font-weight: bolder;
  letter-spacing: 1.2px;
  color: #000 !important;
 }
.navbar-inverse .navbar-nav > .active{
   color: #D66D00 !important;
   background: #fff!important;
 }
 .navbar-inverse .navbar-nav > .active > a, 
 .navbar-inverse .navbar-nav > li > a:hover, 
 .navbar-inverse .navbar-nav > li > a:focus {
      color: #D66D00!important;
      background: #fff!important;
 }

.box-container{
  text-align: center;
}
.box-container img{
  display: block;
margin: 0 auto;

}



@media (max-width: 500px){
      .nav-rg{
  padding-left: 1em;
}
.box-container{
  text-align: left;
  border: 1px solid #eee;
  margin-left: 12px;
  padding: 3px 16px;
}
.box-container img{
  display: block;
margin: 0;
}
}
h1.box-title{
font-size: 18px;
color: #323232;
font-weight: bolder;
letter-spacing: 1px;
}
p.box-text{
  color: #2c2c2c;
  letter-spacing: 0.7px;
  text-align: justify;
  font-family: 'Bree Serif', serif;
}

p.small-pr{
  line-height: 8px;
  font-size: 8px;
}

body{
  overflow-x: hidden;
}
footer{
  background: #323232;
  padding-top: 3em;

}
footer h2{
  color: #fff;
  font-family: 'Coda', cursive;
  font-weight:55%;
  font-size: 18px;
  white-space: nowrap;
}
footer ul li{
  padding-left: .6em;
  margin-top: 2px;
}
footer ul li>a,footer ul li>a:hover,footer ul li>a:active{
  color: #ccc;
  letter-spacing: .5px;
  
}
div.footer_div{
  background: #2A2A2A;
  padding: 12px;
  text-align: center;
  color: #ccc;
}



 /* jssor slider bullet navigator skin 05 css */
        /*
        .jssorb05 div           (normal)
        .jssorb05 div:hover     (normal mouseover)
        .jssorb05 .av           (active)
        .jssorb05 .av:hover     (active mouseover)
        .jssorb05 .dn           (mousedown)
        */
        .jssorb05 {
            position: absolute;
        }
        .jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
            position: absolute;
            /* size of bullet elment */
            width: 16px;
            height: 16px;
            background: url('../images/b05.png') no-repeat;
            overflow: hidden;
            cursor: pointer;
        }
        .jssorb05 div { background-position: -7px -7px; }
        .jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
        .jssorb05 .av { background-position: -67px -7px; }
        .jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }

        /* jssor slider arrow navigator skin 22 css */
        /*
        .jssora22l                  (normal)
        .jssora22r                  (normal)
        .jssora22l:hover            (normal mouseover)
        .jssora22r:hover            (normal mouseover)
        .jssora22l.jssora22ldn      (mousedown)
        .jssora22r.jssora22rdn      (mousedown)
        .jssora22l.jssora22lds      (disabled)
        .jssora22r.jssora22rds      (disabled)
        */
        .jssora22l, .jssora22r {
            display: block;
            position: absolute;
            /* size of arrow element */
            width: 40px;
            height: 58px;
            cursor: pointer;
            background: url('../images/a22.png') center center no-repeat;
            overflow: hidden;
        }
        .jssora22l { background-position: -10px -31px; }
        .jssora22r { background-position: -70px -31px; }
        .jssora22l:hover { background-position: -130px -31px; }
        .jssora22r:hover { background-position: -190px -31px; }
        .jssora22l.jssora22ldn { background-position: -250px -31px; }
        .jssora22r.jssora22rdn { background-position: -310px -31px; }
        .jssora22l.jssora22lds { background-position: -10px -31px; opacity: .3; pointer-events: none; }
        .jssora22r.jssora22rds { background-position: -70px -31px; opacity: .3; pointer-events: none; }

        .mobile_app{
          background: #90e8b0;
          padding: 25px 12px;
          padding-bottom: 0;
        }
        .mobile-container{
          position: relative;
        }
        .mobile-container-download{
          position: absolute;
          top: 50%;
          right: 50%;
          transform: translate(-50%,-50%);
        }


.app-button {
    width: 35%;
}
.app-button {
    float: left;
}
@media (max-width: 480px){ 
.app-button {
    width: 35%;
}
}
@media (max-width: 640px){

.app-button {
    float: left;
    width: 45%;
}
}



.school_container{
  position: relative;
  min-height: 425px;
  background-image: url(../images/school bg.png);

}
.school_container .img_container{
  position: absolute;

  top: 50%;
  right: -25%;
  transform: translateY(-50%);
}
a.black{
  color: #000;
  padding-bottom: 4px;
  border-bottom: 1px solid red;
}
.school-info{
      /*color: #4C555A;*/
      padding-left: 12px;
    line-height: 2.1em;
    margin: 1.2em 0 1.6em;
    font-weight: 500;
    font-size: 15px;

}
a.btn-ani {
  background: #8286F3;
  background-image: -webkit-linear-gradient(top, #8286F3, #A578E4);
  background-image: -moz-linear-gradient(top, #8286F3, #A578E4);
  background-image: -ms-linear-gradient(top, #8286F3, #A578E4);
  background-image: -o-linear-gradient(top, #8286F3, #A578E4);
  background-image: linear-gradient(to bottom, #8286F3, #A578E4);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
    cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
           -webkit-box-shadow: 2px 3px 3px #666666;
  -moz-box-shadow: 2px 3px 3px #666666;
  box-shadow: 2px 3px 3px #666666;
}

a.btn-ani:hover {

  text-decoration: none;
   -webkit-box-shadow: 1px 1px 3px #666666;
  -moz-box-shadow: 1px 1px 3px #666666;
  box-shadow: 1px 1px 3px #666666;
}
.bg-div{
/*    background: url (images/school bg.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;*/
  background: url('../images/school_bg.png') no-repeat ;
  background-position: left bottom;
}
.real-estate{
  background: #ECF0F5;
  padding: 3em;
  padding-top: 20px;
  background: url('../images/real-estate-bg.png') no-repeat ;
  background-position: center center;
}
.real-estate h1{
  margin-bottom: 2em;
}


.card{

  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  padding: 16px;
  background: #ffffff;
}
.oii-card{
  margin-left: 4%;
}
.oiii-card{
  background: #8F81EE;
  text-align: center;
  color: #fff;
    margin-left: 29.175%;

}
.oiii-card p{
  letter-spacing: 2px;
}

.still{
  background: #344055;
  padding: 20px;

}
.still h4{
      color: #fff;
    font: 700 36px/36px 'Roboto', sans-serif;
    margin: 0 0 40px;
    text-align: center;
}
.still a.call{

  display: inline-block;
    vertical-align: top;
    min-width: 240px;
    border: 1px solid #fff;
    color: #ffffff;
    font: 20px/48px 'Roboto', sans-serif;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    margin: 0 15px;
    text-decoration: none;
      margin-top: 4px;
}
.still a.call:hover{
  background: #ffffff;
  color: #344055;
}
.another-footer{
  background: #1E1A1A;
  min-height: 65px;
  line-height: 65px;
  text-align: center;
  font-weight: 700;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 8px;
  font-weight: bold;
}

@media only screen and (max-width: 500px){
 .bg-div{
  background: transparent;
 }
 .black{
  font-size: 8px;
 }
 .still a.call{
    font: 17px 'Roboto', sans-serif;
  }
 .oii-card,.oiii-card{
  margin-left: 0;
}

}