@charset "utf-8";

/* CSS Document */

@font-face {font-family:'lato';
            src:url('../fonts/Lato-Regular.ttf');}

@font-face {font-family:'raleway';
            src:url('../fonts/Raleway-Regular.ttf');}



h1, h2, h3, h4, h5, h6 {text-transform:uppercase;}
h2 {font-size:1.7em;}

a:hover {text-decoration: none;}

.info-bar {background-image: url(../images/info-bg.png); text-align: right; background-size: cover;  background-repeat: no-repeat; padding-top: 27px; height:auto; color: #fff;}
.mail-add a {color: #fff;}
.info-bar span {font-family: 'lato'; padding-left: 3%;}
.socio-icon {text-align: center;}
.socio-icon i {padding-left:3%; color: #fff; font-size: .9em; }
@media screen and (min-width:768px) and (max-width:937px) {
    
    .info-bar {font-size: .9em; }
    
}

/*-------------------------------side-bar-------------------------*/


.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    background-color: #d7261d;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 10%;
    line-height:3;
}
#sidenav-btn {visiblity: hidden !important;}
    

.sidenav span {
    padding: 0px;
    margin: 0;
    text-decoration: none;
    font-size: 1em;
    color: #fff;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

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

    .sidenav .closebtn:hover {text-decoration: none;}    
    .sidenav .mail-add a {font-size: 1em;}    

#main {
    transition: margin-left .5s;
    
}
.socio-icon hr {width: 30%;}

.nav-btns ul li a {font-family: 'raleway'; color: #fff; font-size: .8em; font-weight: bold;}




@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

    @media screen and (min-width:320px) and (max-width:828px){
        
        
        #main .info-bar {line-height: 0px; padding-top: 2.5%; height:50px; }
        .sidenav {visibility: visible; }
        .hidenav {visibility: hidden; width: 0; height: 0;}
        #sidenav-btn {visibility: visible; font-size: 20px !important;  text-align: left !important;}
        .sidenav .info-bar  {text-align: left; background-image: none;}
        .sidenav .info-bar span {display: block;}
        .sidenav .info-bar .phone-no span {text-align: center;}
        nav ul {visibility: hidden; width: 0; height: 0;} 
    }     
    
 @media screen and (min-width:829px) and (max-width: 1399px) {
        
        .sidenav {visibility: hidden !important;}
        .hidenav {visibility: visible !important;}
        #sidenav-btn {visibility: hidden !important;}
        
        
    } 

/*---------------------------side-bar-closed--------------------*/

.logo {margin: 2% 0 1% 0;}
/*---------------------------dropdown-menu-open-------------------*/
nav {line-height: 6;}
nav ul li {margin-left:3%;}
nav ul li a {font-family: 'raleway'; font-size: 1em; color: #d7261d; font-weight: bold; margin-left: 3%; line-height: 0;}
nav ul li a:hover {color: #d7261d; border-bottom:3px solid #d7261d; text-decoration: none; padding-bottom: 15%;}
.nav-col {padding-left: 0;}
nav ul:first-child li:nth-child(2) {line-height: 0; width: 70px;}
.parent-menu a {border-bottom: transparent;}
.parent-menu .fa {font-size:10px !important; line-height:7px !important;}
.parent-menu .sub-menu {visibility: hidden; overflow: hidden; width: 0; height: 0;}
.parent-menu:hover .sub-menu   {visibility: visible !important; overflow: visible !important;  }
.parent-menu:hover .sub-menu li:nth-child(2) {width: 130px; }
.parent-menu:hover .sub-menu  {width: 130px; margin-top: 1%; text-align: center; height: 255px !important; font-family: 'raleway';  background-color: #fff;   line-height: 6; box-shadow: 0 0 10px rgba(0,0,0,0.6); -moz-box-shadow: 0 0 10px rgba(0,0,0,0.6); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6); -o-box-shadow: 0 0 10px rgba(0,0,0,0.6); position: absolute; z-index: 999; }
.parent-menu:hover .sub-menu li:nth-child(4) {line-height: 0;}

/*---------------------------dropdown-menu-closed----------------*/

/*-----------------------------search-bar----------------------------*/


.banner-slider {margin: 0% auto 5%;}
.why-us div {margin:5% auto;}
.why-us h2 {font-family: 'raleway'; text-align: center; color: #d7413a; font-weight: bold; }
.why-us hr {border: 1px solid #d7413a; width: 320px; }
.hideme {opacity: 0;}
.triangle-1 {
    width: 90%;
    float:left;
    position: absolute;
    z-index:-1;
    top:0;
    border-width: 100px 50px 0px;
    border-style: solid;
    border-color: #fcb912 transparent;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}

.circle-1 {width:120px; height:120px; border-radius:120px; line-height:150px; background-color:#fcb912; border: 5px solid #fff; position:absolute; z-index:3; top:-1px; right:0px;}

.circle {box-shadow: inset 0 10px 5px 6px rgba(0,0,0,0.3);}

.triangle-2 {
    width: 90%;
    float:right;
    position: absolute;
    z-index:-1;
    top:0px;
    right:0;
    border-width: 100px 50px 0px;
    border-style: solid;
    border-color: #fcb912 transparent;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}

.circle-2 {width:120px; height:120px; border-radius:120px; line-height:150px; background-color:#fcb912; border: 5px solid #fff; position:absolute; z-index:3; top:-1px; left:0px;}


.triangle-3 {
    width: 90%;
    float:left;
    position: absolute;
    z-index:-1;
    top:0px;
    border-width: 100px 50px 0px;
    border-style: solid;
    border-color: #86c140 transparent;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}

.circle-3 {width:120px; height:120px; border-radius:120px; line-height:150px; background-color:#86c140; border: 5px solid #fff; position:absolute; z-index:3; top:-1px; right:0px;}

.triangle-4 {
    width: 90%;
    float:right;
    position: absolute;
    z-index:-1;
    top:0px;
    right:0;
    border-width: 100px 50px 0px;
    border-style: solid;
    border-color: #86c140 transparent;
     -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
     }

.circle-4 {width:120px; height:120px; border-radius:120px; line-height:150px; background-color:#86c140; border: 5px solid #fff; position:absolute; z-index:3; top:-1px; left:0px;}

.triangle-5 {
    width: 90%;
    float:left;
    position: absolute;
    z-index:-1;
    top:0px;
    border-width: 100px 50px 0px;
    border-style: solid;
    border-color: #00acec transparent;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}

.circle-5 {width:120px; height:120px; border-radius:120px; line-height:150px; background-color:#00acec; border: 5px solid #fff; position:absolute; z-index:3; top:-1px; right:0px;}

.triangle-6 {
    width: 90%;
    float:right;
    position: absolute;
    z-index:-1;
    top:0px;
    right:0;
    border-width: 100px 50px 0px;
    border-style: solid;
    border-color: #00acec transparent;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}

.circle-6 {width:120px; height:120px; border-radius:120px; line-height:150px; background-color:#00acec; border: 5px solid #fff; position:absolute; z-index:3; top:-1px; left:0px;}

.triangle-7 {
    width: 90%;
    float:left;
    position: absolute;
    z-index:-1;
    top:0px;
    border-width: 100px 50px 0px;
    border-style: solid;
    border-color: #f730a5 transparent;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    }

.circle-7 {width:120px; height:120px; border-radius:120px; line-height:150px; background-color:#f730a5; border: 5px solid #fff; position:absolute; z-index:3; top:-1px; right:0px;}


.triangle-8 {
    width: 90%;
    float:right;
    position: absolute;
    z-index:-1;
    top:0px;
    right:0;
    border-width: 100px 50px 0px;
    border-style: solid;
    border-color: #f730a5 transparent;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    }

.circle-8 {width:120px; height:120px; border-radius:120px; line-height:150px; background-color:#f730a5; border: 5px solid #fff; position:absolute; z-index:3; top:-1px; left:0px;}


.right h4 {font-weight:bold; font-size:1.5em; padding-top:8%}
.right p { font-weight:bold; margin:auto 20%;}
.left h4 {font-weight:bold; font-size:1.5em;  padding-top:8%}
.left p {font-weight:bold;}
.orange-bg {text-align: center; font-family: 'raleway'; position:relative; font-weight: bold;  color: #fff; height: 108px; padding-top: 1%;}
.orange-bg p { font-size: .9em; font-weight:lighter; color:#fff;}
.green-bg {text-align: center; font-family: 'raleway';font-weight: bold;   color: #fff; height: 108px; padding-top: 1%; }
.green-bg p { font-size: .9em; font-weight:lighter; color:#fff; }
.blue-bg {text-align: center; font-family: 'raleway'; font-weight: bold;   color: #fff; height: 108px; padding-top: 1%; }
.blue-bg p { font-size: .9em; font-weight:lighter; color:#fff; }
.pink-bg {text-align: center; font-family: 'raleway'; font-weight: bold;  color: #fff; height: 108px; padding-top: 1%; }
.pink-bg p { font-size: .9em; font-weight:lighter; color:#fff; }
.courses {margin: 10% 0; font-family: 'raleway';}
.courses h2 { text-align: center; color: #d7413a; font-weight: bold; }
.courses hr {border: 1px solid #d7413a; width: 220px; margin-bottom:10%; }
.icon-1 { color: #fcb912;  text-align: center; font-weight:bold; padding:5% auto !important;}
.icon-1 h4 {padding: 5% auto;  font-weight:bold;}
.icon-2 {color: #86c140;  text-align: center; font-weight:bold; padding:5% auto !important;}
.icon-2 h4 {padding: 5% auto; font-weight:bold;}
.icon-3 {color: #00acec; text-align: center; font-weight:bold; padding:5% auto !important;}
.icon-3 h4 {padding: 5% auto; font-weight:bold;}
.icon-4 {color: #f730a5; text-align: center; font-weight:bold; padding:5% auto !important;}
.icon-4 h4 {padding: 5% auto; font-weight:bold;}
.part-2 {margin: 8% auto;}
.student-work h2 {font-family: 'raleway'; text-align: center; color: #d7413a; font-weight: bold; }
.student-work hr {border: 1px solid #d7413a; width: 180px; margin-bottom: 5%;}

/*---------------------------------------------------tabs-open-----------------------------------------*/
.nav-tabs { border-bottom: 2px solid #DDD; }
.nav-tabs a {font-family: 'raleway';}
    .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; }
    .nav-tabs > li > a { border: none; color: #666; font-family: 'raleway'; }
        .nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none; color: #d7413a !important; background: transparent; }
        .nav-tabs > li > a::after { content: ""; background: #d7413a; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); }
    .nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after { transform: scale(1); }
.tab-nav > li > a::after { background: #21527d none repeat scroll 0% 0%; color: #fff; }
.tab-pane { padding: 15px 0; }
.tab-content{padding:20px}
.tab-content img {margin: 5% auto; border: 5px solid rgba(255,255,255,0.3); box-shadow: 0 0 17px 0px rgba(0,0,0,0.3);}
.card {background: #FFF none repeat scroll 0% 0%;  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); margin-bottom: 30px; }



.dropdown-menu {min-width: 100px !important;}
/*---------------------------------------------------tabs-close-----------------------------------------*/
.placements {margin: 5% 0;}
.placements h2 {font-family: 'raleway'; text-align: center; color: #d7413a; font-weight: bold; }
.placements hr {border: 1px solid #d7413a; width: 140px; margin-bottom: 5%;}
.placements h1 {font-family: 'raleway';  color: #fff; font-weight: bold; }
#o-bg {background-image: url(../images/icon5.png); background-size: contain; background-repeat: no-repeat; background-position: center;}
#o-bg h1 {padding: 5% 8%;}
#o-bg~p {color: #fcb912; font-family: 'raleway'; font-weight: bold; padding-top: 3%;}
#g-bg {background-image: url(../images/icon6.png); background-size: contain; background-repeat: no-repeat; background-position: center;}
#g-bg h1 {padding: 5% 8%;}
#g-bg~p {color: #86c140; font-family: 'raleway'; font-weight: bold; padding-top: 3%;}
#b-bg {background-image: url(../images/icon7.png); background-size: contain; background-repeat: no-repeat; background-position: center;}
#b-bg h1 {padding: 5% 8%;}
#b-bg~p {color: #00acec; font-family: 'raleway'; font-weight: bold; padding-top: 3%;}
.recruit {margin: 10% 0;}
.recruit h2 {font-family: 'raleway'; text-align: center; color: #d7413a; font-weight: bold; }
.recruit hr {border: 1px solid #d7413a; width: 200px; margin-bottom: 5%;}
.expert {background: #e5e5e5; padding-bottom: 5%;}
.expert h2 {font-family: 'raleway'; text-align: center; color: #d7413a; font-weight: bold; padding-top: 5%; }
.expert hr {border: 1px solid #d7413a; width: 140px; margin-bottom: 5%;}
.slider h3 {color: #d7413a !important; font-family:'raleway'; font-size:1.5em;}
.slider p {color: #000; font-family:'lato'; font-size:1em;}
.infras h2 {font-family: 'raleway'; text-align: center; color: #d7413a; font-weight: bold; padding-top: 5%; }
.infras hr {border: 1px solid #d7413a; width: 260px; margin-bottom: 5%;}

/* BackToTop button css */
#scroll {
position:fixed;
right:10px;
bottom:10px;
cursor:pointer;
z-index: 999;
width:50px;
height:50px;
background-color:#f7c252;
text-indent:-9999px;
display:none;
-webkit-border-radius:60px;
-moz-border-radius:60px;
border-radius:60px
}
#scroll span {
position:absolute;
top:50%;
left:50%;
margin-left:-8px;
margin-top:-12px;
height:0;
width:0;
border:8px solid transparent;
border-bottom-color:#ffffff
}
#scroll:hover {
background-color:#e74c3c;
opacity:1;filter:"alpha(opacity=100)";
-ms-filter:"alpha(opacity=100)";}
/*------------------------------------------------------------------*/
.carousel-inner.onebyone-carosel { margin: auto; width: 90%; }
.item b {font-family: 'raleway'; font-weight: bolder; color: #d7413a;}
.item p {font-family: 'lato';}
.touch {margin: 5% auto;}
.touch h2 {font-family: 'raleway'; text-align: center; color: #d7413a; font-weight: bold; padding-top: 5%; }
.touch hr {border: 1px solid #d7413a; width: 160px; margin-bottom: 5%;}
.touch .fa {color: #fff; padding-top: 30px;}
.m-hover  {width: 250px; height: 250px; margin: 3% auto; background-color: #fcb912; border-radius: 250px;  text-align: center;}
.m-hover p {visibility: visible; height: 40px; background-image: url(../images/msg_bg.png); background-repeat: no-repeat;   background-position: center; line-height: 3; transition: all .8s ease-in-out; color: #aaa; font-weight:bold; font-family: 'lato'; cursor: pointer;}

 .m-hover:hover {margin: -10px auto;
 		-webkit-transition: .3s;
		 -moz-transition: .3s;
			 -o-transition: .3s;
			-ms-transition: .3s;
			  	transition: .3s;
			  	cursor:pointer;
			  	border: 6px solid rgba(225,225,225,0.8);
			  	 border-radius: 150px/100px;
    box-shadow: inset 0 10px 5px rgba(0,0,0,0.3);}
.l-hover  {width: 250px; height: 250px; margin: 3% auto; background-color: #86c140; border-radius: 250px;  text-align: center;}
.l-hover p {visibility: visible; height: 115px; background-image: url(../images/msg_bg2.png); background-repeat: no-repeat;   background-position: center;  line-height: 1.2; padding-top:  6%; transition: all .8s ease-in-out; color: #aaa; font-weight:bold; font-family: 'lato'; cursor: pointer;}

 .l-hover:hover {margin: -10px auto;
 		-webkit-transition: .3s;
		 -moz-transition: .3s;
			 -o-transition: .3s;
			-ms-transition: .3s;
			  	transition: .3s;
			  	cursor:pointer;
			  	border: 6px solid rgba(225,225,225,0.8);
			  	 border-radius: 150px/100px;
    box-shadow: inset 0 10px 5px rgba(0,0,0,0.3);}
.p-hover  {width: 250px; height: 250px; margin: 3% auto; background-color: #00acec; border-radius: 250px;  text-align: center;}
.p-hover p {visibility: visible; height: 40px; background-image: url(../images/msg_bg.png); background-repeat: no-repeat;   background-position: center;  line-height: 3; transition: all .8s ease-in-out; color: #aaa; font-weight:bold; font-family: 'lato'; cursor: pointer;}

 .p-hover:hover {margin: -10px auto;
 		-webkit-transition: .3s;
		 -moz-transition: .3s;
			 -o-transition: .3s;
			-ms-transition: .3s;
			  	transition: .3s;
			  	cursor:pointer;
			  	border: 6px solid rgba(225,225,225,0.8);
			  	 border-radius: 150px/100px;
    box-shadow: inset 0 10px 5px rgba(0,0,0,0.3);}
.testimo  {margin: 5% auto; background: #e5e5e5; padding-bottom: 5%;}
.testimo .mb-r {margin: 5% auto;}
.testimo h2  {font-family: 'raleway'; text-align: center; color: #d7413a; font-weight: bold; padding-top: 5%; }
.testimo h4  {font-family: 'raleway'; text-align: center; color: #d7413a; font-weight: bold; padding-top: 5%; }
.testimo hr {border: 1px solid #d7413a; width: 260px; margin-bottom: 5%;}
.testimo h5 {font-family: 'lato';}
.testimo p {font-size:12px; font-family: 'lato';}

<!--------------testimonial-css------------------->


.green-text .fa {color: #86c140;}
.blue-text .fa {color: #00acec;}
.orange-txt i {color: #fcb912 !important;}
.find-us {margin: 5% auto;}
.find-us h2 {font-family: 'raleway'; text-align: center; color: #d7413a; font-weight: bold; padding-top: 5%; }
.find-us hr {border: 1px solid #d7413a; width: 160px; margin-bottom: 5%;}
.s-d-w { -webkit-box-shadow: 0 8px 6px -6px black,

-moz-box-shadow: 0 -8px 6px -6px black;

box-shadow: 0 -8px 6px -6px black; }

.awrd h3 {font-family: 'raleway'; text-align: center; font-size:30px; color: #d7413a; font-weight: bold; margin-top:5%;}
.awrd hr {border: 1px solid #d7413a; width: 60px; }
.bdr {border: 3px solid #d7413a; padding-top:15%;} 
.csr h3 {font-family: 'raleway'; text-align: center; font-size:30px; color: #d7413a; font-weight: bold; margin-top:5%;}
.csr hr {border: 1px solid #d7413a; width: 160px;  margin-bottom:10%;}
.csr h4 {font-family: 'raleway'; color: #FFF; font-weight: bold;}
#headingOne {background: #d7261d ;}   
#headingtwo {background: #fcb912;}
#headingthree {background: #86c140;}
#headingfour {background: #00acec;}
#headingfive {background: #00acec;}   
#headingsix {background: #86c140;}
#headingseven {background: #fcb912;}
#headingeight {background: #fcb912;}
#headingnine {background: #00acec;}
.block01 {margin:5% auto;}
.block01 h4 {font-family: 'raleway'; color: #d7261d;}
.block01 p {font-family: 'lato';}
.panel-body {font-family: 'lato';}
footer  {background-image: url(../images/footer-bg.png); background-repeat: no-repeat;  background-size: cover; height: 109px; background-position: bottom;}
footer h6 {font-family: 'lato'; text-align: center; color: #fff; font-weight: bold; height: 20px; margin-top: 70px; font-size: 1em; }
@media screen and (max-width: 700px) and (min-width:320px){
    
    footer h6 {font-size: .6em; margin-top: 80px; margin-bottom: 0;}
    
}


.card-bg {
    margin:3% auto;
    background-color:#fff;
    padding: 5%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 90%;
    height:300px;
    border-radius: 5px;
}

.card-bg h5 { font-family:'raleway'; font-weight:bold; color:#d7413a;}
.card-bg:hover h5 {color:#fff;}
.card-bg:hover p{color:#e5e5e5;}
.card-bg:hover {
    cursor:pointer;
    background-color:#d7413a;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.card-bg p {font-family:'lato';}
.card-bg img {
width:180px;
background-color:#fff;
border: 1px solid #999;
    border-radius: 5px 5px 0 0;
}

.description {
    padding: 2px 16px;
}