@font-face {
   font-family: GillSansMT;
   src:url(gill-sans-mt.ttf);
}
body{
    /*font-family: 'Raleway', sans-serif;*/
	font-family: GillSansMT;
	overflow-x: hidden;
}
.f-9{
    font-size: 13px;
}
.f-8{
    font-size: 11px;
}
.bg-none{
    background: none !important;
}
a:hover{
    text-decoration: none;
}
.bg-theem{
    background: #f3ca27 !important;
}
.text-theem{
    color: #f3ca27 !important;
}
.b-none{
    border: none !important;
}
.text-gray{
    color: #cccccc;
}
.bg-black{
    background: #111 !important;
}
.text-black{
    color: #111;
}
button:focus{
   outline: none;
}
h1, h2, h3, h4, h5, h6{
    font-family: 'Raleway', sans-serif;
}
.my-btn{
    background: #f3ca27 ;
    color: #ffffff;
    font-size: 16px;
    padding: 5px 10px;
}
.my-btn:hover{
    background: #111;
    color: #fff !important;
}
.border-lg-right {
    border-right: 1px solid #dee2e6!important;
}
.big-icon{
    font-size: 35px;
    color: #f3ca27;
}
.border-x{
    border-left: 1px solid #f3ca27;
    border-right: 1px solid #f3ca27;
}
.admission{
    background: #f3ca27;
    color: #fff !important;
    padding: 10px 25px;
    font-weight: 600;
    border-radius: 10px;
    display: inline-block;
    animation-name: admission;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes admission {
    0%   {background: f3ca27;}
    50%  {background: #f3ca27;}
    100% {background: f3ca27;}
}
/* scroll button css*/
#scroll{
    color: #fff;
    background: #f3ca27;
    font-size: 20px;
    border-radius: 50%;
    padding: 10px;
    z-index: 999;
    position:fixed;
    right:15px;
    bottom:15px;
    cursor:pointer;
    animation-name: scrowel;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes scrowel {
    0%   {transform: translatey(8px);}
    50%  {transform: translatey(-8px);}
    100% {transform: translatey(8px);}
}
#scroll:hover{
    color: #f3ca27;
    background: #fff;
    border: 2px solid #f3ca27;
}
/* top */
.top-icon a i{
    font-size: 14px;
    color: #f8f9fa;
}
.top-icon a i:hover{
    color: #f3ca27;
}
.top-icon a{
    margin: 0 5px;
    font-size: 14px;
}
.my-btn-2{
    margin-top: 3px;
    margin-left: 20px;
    display: inline-block;
    padding: 9px 17px;
    border: 2px solid #111;
    color: #fff;
    background: #111;
}
.my-btn-2:hover{
    color: #fff;
    border: 2px solid #f3ca27;
    background: #f3ca27;
}
/* menu css */
.bg-transparent{
    background: rgba(0,0,0,.6) !important;
}
.menu{
    /*padding: 0 30px !important;*/
    position: sticky;
    top: 0;
    z-index: 9999;
    /*background: #323232;*/
    background: #fff;
	box-shadow: 0 5px 20px 0px rgb(0 0 0 / 34%) !important
}
.nav-link{
    /*font-family: Raleway;*/
    text-transform: uppercase;
    padding: 12px 20px !important;
    position: relative;
    /*color: #fff !important;*/
    color: #898989 !important;
	font-size: 14px;
}
.nav-link::after {
    width: 4px;
    height: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
    content: "";
    border-right: 1px solid #898989;
}

.navbar-collapse{
    justify-content: flex-end !important;
}
.dropdown-item{
    font-family: Raleway;
    text-transform: uppercase;
    padding: 5px 10px !important;
    color: #fff;
    transition: .5s;
    border-radius: 0 !important;
    background-color: #323232;
}
.dropdown-item:hover::before{
    position: absolute;
    content: "-";
    left: 0;
}
.dropdown-menu{
    display: block;
    transform: scale(0,1);
    border: 1px solid #323232;
    background: #323232 !important;
    overflow: hidden;
    margin: 0;
    border-radius: 0 !important;
    transition: .3s;
    padding: 0;
}
.dropdown:hover .dropdown-menu{
    transform: scale(1,1);
    background: #fff;
    z-index: 999;;
}
.dropdown-item:hover {
    color: #fff !important;
    transform: translateX(10px);
    background-color: #323232 !important;
}
/* End nave */

/* slider css */
#slider h4{
	font-size:28px;
	margin-bottom:15px;
	color:#232323;
	font-family: 'Raleway', sans-serif;
	letter-spacing: 0px;
	font-weight:400;
}
#slider p{
	font-size:18px;
	margin-bottom:15px;
	color:#232323;
}
#slider .carousel-item a{
    background:#f3ca27;
    font-size: 20px;
    color:#232323;
    font-weight: 600;
    padding: 10px 28px;
    display:inline-block;
}
#slider .carousel-item a:hover{
    background:#232323;
    color: #fff;
    text-decoration:none;
}

#slider h4, #slider p, #slider a, #slider .carousel-item .mask img{-webkit-animation-duration: 1s;
    animation-duration: 1.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.carousel-control-next, .carousel-control-prev{height:40px; width:40px; padding:12px; top:50%; bottom:auto; transform:translateY(-50%); background-color: #f47735; }
#slider .carousel-item h4{-webkit-animation-name:fadeInLeft; animation-name:fadeInLeft;} 
#slider .carousel-item p{-webkit-animation-name:slideInRight; animation-name:slideInRight;} 
#slider .carousel-item a{-webkit-animation-name:fadeInUp; animation-name:fadeInUp;}
#slider .carousel-item .mask img{-webkit-animation-name:slideInRight; animation-name:slideInRight; display:block; height:auto; max-width:100%;}

.carousel-fade .carousel-item-next.carousel-item-left, .carousel-fade .carousel-item-prev.carousel-item-right, .carousel-fade .carousel-item.active {
	opacity: 1
}
.carousel-fade .carousel-item-left.active, .carousel-fade .carousel-item-right.active {
	opacity: 0
}
.carousel-fade .carousel-item-left.active, .carousel-fade .carousel-item-next, .carousel-fade .carousel-item-prev, .carousel-fade .carousel-item-prev.active, .carousel-fade .carousel-item.active {
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0)
}
@supports (transform-style:preserve-3d) {
	.carousel-fade .carousel-item-left.active, .carousel-fade .carousel-item-next, .carousel-fade .carousel-item-prev, .carousel-fade .carousel-item-prev.active, .carousel-fade .carousel-item.active {
	-webkit-transform:translate3d(0, 0, 0);
	transform:translate3d(0, 0, 0)
	}
}
.carousel-fade .carousel-item-left.active, .carousel-fade .carousel-item-next, .carousel-fade .carousel-item-prev, .carousel-fade .carousel-item-prev.active, .carousel-fade .carousel-item.active {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

.carousel-caption{
    text-align: left;
    padding: 200px 50px;
    left: 0;
    right: 50%;
    top: 0;
    overflow: hidden;
    bottom: 0;
    background: rgba(255, 255, 255, .8);
}
.carousel-indicators {
    -ms-flex-pack: center;
    justify-content: left;
    z-index: 999;
}
.carousel-indicators li {
    position: relative;
    box-sizing: content-box;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    width: 4px;
    height: 4px;
    padding: 4px !important;
    border-radius: 50%;
    background-color: transparent !important;
    opacity: 1;transform: scale(.7);
    border: 2px solid transparent !important;
    transition: .6s;
}
.carousel-indicators li::before{
    position: absolute;
    content: "";
    left: 3px;
    top: 3px;
    right: 3px;
    bottom: 3px;
    border-radius: 50%;
    background: #232323;
}
.carousel-indicators .active {
    transform: scale(1);
    border: 2px solid #232323 !important;
}

/* page css */
.titel{
    position: relative;
    text-align: center;
    font-size: 100px;
    letter-spacing: 50px;
    line-height: 1;
    text-transform: uppercase;
    font-weight: 900;
    opacity: .5;
    color: #cecece;
}
.title-2 {
    color: #232323;
    font-size: 38px;
    line-height: 56px;
}
.about img{
    width: 100%;
}
/* counter up css */
.demo .col-lg-3{
    text-align:center;
}
.counter{
    color: #f3ca27;
    font-size: 50px !important;
}
.conter-text{
    color: #232323;
    font-size: 24px;
}
.counter, .plus {
    color: #f3ca27;
    font-size: 50px !important;
    font-weight: 400;
    margin-bottom: 10px;
}
.comp-slider{
    background: url(../images/bg1.jpg);
    background-size: 100% 100%;
	height: 500px;
    margin-bottom: 100px !important;
}
.drag-slider{
    position: absolute;
    top: 0;
}

/* Drag the Slider  Css */
.img-comp-container {
    position: relative;
    height: 400px;
    width: 900px;
    margin: auto;
}
.img-comp-img {
    position: absolute;
    overflow:hidden;
    height: 400px;
    width: 900px;
}
.img-comp-img img {
    display:block;
    width: 900px;
    height: 400px;
    vertical-align:middle;
}
.img-comp-slider {
    position: absolute;
    z-index:9;
    cursor: ew-resize;
    width: 40px;
    height: 40px;
    background: url(../images/icon.png);
    background-size: 100% 100%;
    border-radius: 50%;
    border: 2px solid #fff;
}

.iiitd{
    overflow: hidden;
}

/* designer-planing */
.designer-planing{
    background: url(../images/bg.jpg?1);
    background-size: cover;
    padding: 0 7rem;
}
.planing h1{
    color: #f3ca27;
    position: relative;
    text-align: center;
    margin: 0;
    font-size: 50px;
}
.planing h5{
    font-weight: 600;
    color: #fff;
    padding: 10px 0;
}
.planing p{
    color: #fff;
}
.planing h1::before{
    position: absolute;
    content: "";
    height: 2px;
    width: 40%;
    background: #f3ca27;
    left: 0;
    top: 50%;
}

/* project css */
.project-1, .project-2{
    position: relative;
    overflow: hidden;
}
.project-detail{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    padding: 10% 20px;
    opacity: 0;
    transition: .5s;
    background: rgba(0,0,0,.8)
}
.project-2 .project-detail{
    padding: 50% 20px;
}
.project-1:hover .project-detail{
    opacity: 1;
}
.project-2:hover .project-detail{
    opacity: 1;
}
.project-detail h5{
    color: #fff;
    transition: 1s;
    letter-spacing: 1px;
    transform: translateY(40px);
    font-weight: 600;
}
.project-detail:hover h5{
    transform: translateX(0);
}
.project-detail p{
    transform: translateY(40px);
    color: #fff;
    transition: 1.5s;
}
.project-detail:hover p{
    transform: translateX(0);
}
.project-detail a{
    display: inline-block;
    transform: translateY(40px);
    border: 1px solid #fff;
    color: #fff;
    transition: 2s;
    padding: 8px 15px;
}
.project-detail:hover a{
    transform: translateX(0);
}
.big-img{
    height: 300% !important;
}

 /* footer css*/
 .footer{
    background: #282828;
}
.copyright{
    border-top: 1px solid #464646;
    background: #282828;
}
.t-light{
    color: #ccc;
}
.f-icon a i{
    color: #798590;
    font-size: 14px;
    border: 1px solid #798590;
    padding: 7px 7.5px;
    margin-right: 10px;
}
.b-left{
    border-left: 1px solid #d2d2d2;
}
.facebook{
    padding: 7px 10px !important;
}
.f-icon a i:hover{
    color: #fff !important;
    background: #f3ca27 !important;
    border: 1px solid #f3ca27;
}

.f-hadding{
    font-size: 20px;
    text-transform: uppercase;
    font-weight: bold;
    color: #798590 !important;
}

.f-50{
    width: 50%;
    float: left;
}
.f-ul{
    padding: 0;
}
.f-ul li{
    list-style: none;
    margin-bottom: 5px;
}
.f-ul li a{
    transition: .3s;
    font-weight: 400;
    color: #cccccc;
}
.f-ul li a:hover{
    color: #f3ca27;
    padding-left: 8px;
}

/* Oct 2 css */
.banner{
    /*height: 550px;*/
    overflow: hidden;
}
.card-img-overlay{
    background-color: rgba(0,0,0,.5);
}
.title{
    color: #ffffff;
    font-size: 48px;
    line-height: 58px;
    letter-spacing: 2px;
}

.team{
    width: 100%;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer;
}
.team .team-detail{
    position: absolute;
    top: 110%;
    left: 0;
    width: 300px;
    display: none;
    box-shadow: 0 0 50px 0 rgba(0,0,0,0.23) !important;
    border-radius: 10px;
}
.show{
    display: inline-block !important; 
}
.team .team-detail:before{
    position: absolute;
    content: "";
    border-bottom: 20px solid #fff;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    top: -19px;
    left: 25px;
    filter: drop-shadow(0 -8px 5px rgba(0,0,0,0.23));
}
.team:focus{
    z-index: 10;
}
.team:focus .team-detail{
    display: inline-block;
}

.navbar-toggler{
	background: grey;
}

.py-6{
	padding-top: 5em;
	padding-bottom: 5em;
}

.link-btn{
	background: #f3ca27;
    font-size: 20px;
    color: #232323;
    font-weight: 600;
    padding: 10px 28px;
    display: inline-block;
}

.link-btn:hover{
	background: #232323;
    color: #fff;
    text-decoration: none;
}
.more-project .project-detail{
	padding-top: 25%;
}