/*
font-family: 'Arapey', serif;
font-family: 'Actor', sans-serif;
*/

html, body{
  margin:0px; padding:0px;
    font-family: 'Actor', sans-serif;
    margin-top: 52px;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6{font-family: 'Arapey', serif;}


#navbar-primary .navbar-nav {
background: #ededed;
  width: 100%;
  text-align: center;
  > li {
    display: inline-block;
    float: none;
    > a {
      padding-left: 30px;
      padding-right: 30px;
    }
  }
}
.link{ border: #000 solid 1px; padding: 10px 30px; color: #000; border-radius: 25px; text-decoration: none; font-weight: 600; font-size: 18px; font-family: 'Actor', sans-serif;}
.link:hover, .banner .cta1 a:hover{ background-color: #000; color: #ffffff; text-decoration: none; }

/*common css*/
.bg1{background-color: #284D53;}
.bg2{background-color: #326169;}

header{ position: fixed; top: 0px; width: 100%; z-index: 12000;}

.logo{ width: 200px !important; }


#hero1{background:url(../img/homepage_main.jpg); background-size:cover; background-position:center center; background-attachment:fixed; height: 800px;}
#hero2{background: url(../img/satyapal.jpg) no-repeat 50%; /* background-size: cover; */ background-position: center left; background-attachment: fixed; height: 600px;}
.hero .inner{background: rgba(50,97,105,0.7) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAYAAACddGYaAAAAD0lEQVQIW2NkQABjRmQOAAM+AGkQsDBSAAAAAElFTkSuQmCC) repeat;}

#hero1 h1{ font-size: 8em;}
#hero1 h2{ font-size: 5em;}
.copy1{padding-top: 150px !important;}

.banner{ position: relative;}
.banner .cta{ bottom: 80px; left: 100px}
.banner .cta1{ bottom: 80px; right: 100px}
.banner .cta a, .banner .cta1 a{ background-color:#FF7A01; border: #FF7A01 solid 1px; padding: 10px 30px; color: #ffffff; border-radius: 25px; text-decoration: none; font-weight: 600; font-size: 18px; font-family: 'Arapey', serif;}
.banner .cta a:hover, .banner .cta1 a:hover{ background-color: #284D53; color: #ffffff; border: #284D53 solid 1px;}

.brl{ border-left: #fff solid 1px;}

.sbg1{background:url(../img/7.jpg); background-size:cover; background-position:center center;}
.sbg1:hover{background:url(../img/services_hover/2.jpg); background-size:cover; background-position:center center;}

.sbg2{background:url(../img/8.jpg); background-size:cover; background-position:center center;}
.sbg2:hover{background:url(../img/services_hover/1.jpg); background-size:cover; background-position:center center;}

.sbg3{background:url(../img/9.jpg); background-size:cover; background-position:center center;}
.sbg3:hover{background:url(../img/services_hover/5.jpg); background-size:cover; background-position:center center;}

.sbg4{background:url(../img/3.jpg); background-size:cover; background-position:center center;}
.sbg4:hover{background:url(../img/services_hover/8.jpg); background-size:cover; background-position:center center;}

.sbg5{background:url(../img/10.jpg); background-size:cover; background-position:center center;}
.sbg5:hover{background:url(../img/services_hover/10.jpg); background-size:cover; background-position:center center;}

.sbg6{background:url(../img/2.jpg); background-size:cover; background-position:center center;}
.sbg6:hover{background:url(../img/services_hover/9.jpg); background-size:cover; background-position:center center;}

.sbg7{background:url(../img/6.jpg); background-size:cover; background-position:center center;}
.sbg7:hover{background:url(../img/services_hover/3.jpg); background-size:cover; background-position:center center;}

.sbg8{background:url(../img/5.jpg); background-size:cover; background-position:center center;}
.sbg8:hover{background:url(../img/services_hover/4.jpg); background-size:cover; background-position:center center;}

.sbg9{background:url(../img/4.jpg); background-size:cover; background-position:center center;}
.sbg9:hover{background:url(../img/services_hover/7.jpg); background-size:cover; background-position:center center;}

.sbg10{background:url(../img/1.jpg); background-size:cover; background-position:center center;}
.sbg10:hover{background:url(../img/services_hover/6.jpg); background-size:cover; background-position:center center;}

/*
.sbg11{background:url(../img/7.jpg); background-size:cover; background-position:center center;}
.sbg11:hover{background:url(../img/services_hover/2.jpg); background-size:cover; background-position:center center;}
*/


.sbg1 a:hover, .sbg2 a:hover, .sbg3 a:hover, .sbg4 a:hover, .sbg5 a:hover, .sbg6 a:hover, .sbg7 a:hover, .sbg8 a:hover, .sbg9 a:hover, .sbg10 a:hover, .sbg11 a:hover{text-decoration: none;}

#carouselTestimonial .carousel-inner {width: 70%; margin: auto; height: 210px}
#carouselTestimonial .carousel-inner .carousel-item {padding: 20px 30px;}

#carouselTestimonial span.po1 {position: absolute; top: 0px; left: 0px; font-size: 50px; font-family: arial;}
#carouselTestimonial span.po2 {position: absolute; bottom: 0px; right: 0px; font-size: 50px; font-family: arial;}
#carouselTestimonial .carousel-control-next, #carouselTestimonial .carousel-control-prev {width: 50px font-size: 30px !important; color: #326169 !important; opacity: 1;}
#carouselTestimonial .carousel-control-next .fa, #carouselTestimonial .carousel-control-prev .fa {color: #FF7A01; width: 50px; height: 50px; line-height: 53px; border-radius: 50%; font-size: 25px;}

footer{ background-color: #284D53; position: relative; display: block; color: #fff; font-family: 'Arapey', sans-serif;}
footer a p{padding: 0px 0 0 0; margin: 0px;}
footer a { color: #fff; text-decoration: none;}
footer a:hover{ color: #fff; text-decoration: none;}
footer a .fa{background-color: #fff; color: #008C80; font-size: 25px; border-radius: 50%; height: 50px; width: 50px; line-height: 53px; margin-bottom: 20px; float: left; text-align: center; margin-right: 10px;}
footer a .fa:hover{background-color: #FF7A01; color: #fff; }
footer .fa{background-color: #fff; color: #008C80; font-size: 25px; border-radius: 50%; height: 50px; width: 50px; line-height: 50px; margin-bottom: 20px; float: left; text-align: center; margin-right: 10px;}
footer .fa:hover{background-color: #FF7A01; color: #fff; }

.gallery-grid { clear: both; display: block;}
.gallery-grid.columns {margin-right: 0;}
.one-third { box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.3); width: -ms-calc(33.3333% - 16px); width: -moz-calc(33.3333% - 16px); width: -webkit-calc(33.3333% - 16px); width: calc(33.3333% - 16px); margin: 8px; height: auto; position: relative; float: left;}
.one-third:last-of-type {margin-right: 0;}
.gallery-grid img {width: 100%; height: auto; position: relative; float: left; }
.gallery-grid a { display: block;}
.screen { background-color: rgba(255,122,1,0.7); left: 0; top: 0; border-radius: 0; height: 100%; width: 100%; position: absolute; opacity: 0; z-index: 1000; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.screen:hover {opacity: 1}
.title {color: #fff; font-family: arial, helvetica, sans-serif; font-weight: bold; -webkit-transition: all 0.3s ease-in-out -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; margin-left: -30px;}
.screen:hover .title {margin-left: 0;}
.screen p {font-size: 20px; padding: 30% 5% 5% 5%; font-family: 'Actor', sans-serif !important; text-align: center;}
.screen.fade-in .title { margin-left: 0;}
.screen.fade-in:hover {}
.cta { clear: both; font-weight: bold; font-family: 'Arapey', serif; display: block; font-size: 15px;}

.bg-sitebg {background-color: #009588; color: #fff;}
.icon{font-size: 30px !important; border: 1px solid #fff; border-radius: 50%; height: 70px; width: 70px; line-height: 70px !important; margin: 15px 0px;}

.askit{ top: 40%; left: 20%}
.askit a{ border: #fff solid 1px; padding: 10px 30px; color: #fff; border-radius: 25px; text-decoration: none; font-weight: 600; font-size: 18px; font-family: 'Actor', sans-serif;}

.askit a:hover{ background-color: #fff; color: #000;}

/* adds some margin below the link sets  */
.navbar .dropdown-menu div[class*="col"] {margin-bottom:1rem;}
.navbar .dropdown-menu {border:none; background-color:#284D53!important; text-align: center; border-radius: 0px;}

/* breakpoint and up - mega dropdown styles */
@media screen and (min-width: 992px) {

  /* remove the padding from the navbar so the dropdown hover state is not broken */
.navbar { padding-top:0px; padding-bottom:0px;}

/* remove the padding from the nav-item and add some margin to give some breathing room on hovers */
.navbar .nav-item { padding:2rem .5rem; color: #fff; margin:0 .25rem;}

/* makes the dropdown full width  */
.navbar .dropdown {position:static;}
.navbar .dropdown-menu { width:100%; left:0; right:0; /*  height of nav-item  */ top:102px; display:block; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.3s linear;}
  /* shows the dropdown menu on hover */
.navbar .dropdown:hover .dropdown-menu, .navbar .dropdown .dropdown-menu:hover { display:block; visibility: visible; opacity: 1; transition: visibility 0s, opacity 0.3s linear;}

  .navbar .dropdown-menu {/*    border: 1px solid rgba(0,0,0,.15);*/ background-color: #000; color: #000;}
  .navbar .dropdown-menu .dropdown-item{color: #fff;}
  .navbar .dropdown-menu .dropdown-item:hover{color: #fff; background-color: #FF7A01;}

}

/*Mobile css*/

@media (min-width: 300px) and (max-width: 767.98px) {
    nav {text-align: center;}
    .banner .cta1 { bottom: 130px; right: 16%;}
    #hero2 {background: url(../img/satyapal.jpg) no-repeat 50%; background-size: cover; background-position: center center; /* background-attachment: fixed; */ height: 600px;}
    #carouselTestimonial .carousel-inner .carousel-item {padding: 20px 0px; height: 120px}
    .inner .copy{padding: 3rem 0rem!important}
    footer {text-align: center;}
    footer .fa, footer a .fa{float: none;}
    .one-third{ width: 96%;}
    #hero1 h2 {font-size: 2.4em;}
    #hero1 h1 {font-size: 4em;}
    #hero1 {background: url(../img/homepage_main.jpg); /* background-size: cover; */ /* background-position: center center; */ /* background-attachment: fixed; */ height: 450px; background-repeat: no-repeat; background-size: 100% 100%;}
      .navbar .dropdown-menu .dropdown-item{color: #fff;}
  .navbar .dropdown-menu .dropdown-item:hover{color: #fff; background-color: #FF7A01;}
    #carouselTestimonial .carousel-inner { width: 70%; margin: auto; height: 500px;}
}