:root {
  --primary-color: #52b9e6;
  --secondary-color:#000;
  --third-color:#fff;
  --bg-tp:#0000007d;
  --white-color:#fff;
  --black-color:#000;
  --border-none: 0px;
  --box-shadow: 0px 2px 5px 0px #00000059;
  --transition: all ease 0.3s;
  --font-family:'Roboto Condensed', sans-serif;
  
}

/*------------------Basic styles----------------------*/
*{
	margin: 0;
	padding: 0;
}
body{
	margin: 0;
	padding: 0;
	font-family:var(--font-family);
	font-weight: normal;
	font-size: 16px;
	line-height: 1.5;	
}
h1,h2,h3,h4,h5,h6, p{
	margin: 0;
	padding: 5px;
}
ul li, ul, a{
	margin: 0;
	padding: 0;
	text-decoration: none;
	list-style: none;
}
a{
	color:var(--primary-color);
}
a:hover{
	text-decoration: none;
}

img{
	margin: 0;
	padding: 0;
}

button:focus, .btn:focus, .form-control:focus{
	outline: none;
	box-shadow: 0 0 0 0.0rem rgba(0,123,255,.25);
}
.p-80{
    padding: 80px 0;
}
.text-sky{
    color:var(--primary-color)!important;
}
/*-------------------top bar---------------------*/
.top_bar {
    width: 100%;
    min-height: 30px;
    display: grid;
    justify-content: center;
    align-items: center;
    background: var(--white);
    text-align: center;
    padding: 15px 0px;
}

/*-------------------Nav Bar---------------------*/
.custom-nav {
    background: var(--primary-color);
    box-shadow: var(--box-shadow);
}
.custom-nav .navbar-nav li a {
    margin-left: 20px;
    font-size: 18px;
}
.navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link {
    color: var(--secondary-color);
}
.navbar-dark .navbar-nav .nav-link {
    color: var(--third-color);
}
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
    color: var(--secondary-color);
}
/*-------------------home-banner---------------------*/
.home-banner {
    width: 100%;
    height: 90vh;
    background-size: cover!important;
    background-repeat: no-repeat!important;
    display: grid;
    align-items: center;
    color:var(--third-color);
}
.banner-box {
    background: var(--bg-tp);
    padding: 25px;
}
.banner-box h3 {
    margin-bottom: 10px;
    font-size: 30px;
}
.banner-box p {
    margin-bottom: 15px;
}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    color: var(--third-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-primary {
    color: var(--third-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    border-radius: var(--border-none);
    transition: var(--transition);
    font-size: 16px;
}
.btn-primary:hover {
    color: var(--third-color)!important;
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    transition: var(--transition);
}
/*------------------Quick form----------------------*/
.jumbotron {
    border-radius: var(--border-none);
    background-size: cover!IMPORTANT;
    background-repeat: no-repeat!important;
    margin-bottom: 0px;
}
.jumbotron.quick-form{
	padding: 25px 0px;
	background-color: var(--primary-color);
    color: var(--third-color);
}
.quick-form .form-control {
    border-radius: var(--border-none);
}
.quick-form .form-control:focus {
    border: 1px solid var(--secondary-color);
}
.quick-form .form-control {
    border-radius: var(--border-none);
}
.quick-form ::placeholder {
    color: #bababa!important;
}
.quick-form input[type="submit"] {
    height: 87px;
}
/*--------------------About Us--------------------*/
.about-box {
    background: var(--bg-tp);
    padding: 35px 25px;
    color: var(--third-color);
}
.about-box h3 {
    margin-bottom: 20px;
}
.about-left p {
    margin-bottom: 10px;
}
.image-box {
    width: 100%;
    max-height: 324px;
    overflow: hidden;
}
.image-box img{
	width:100%;
}
.caption-box {
    width: 100%;
    background: var(--primary-color);
    min-height: 50px;
    display: grid;
    justify-content: center;
    align-items: center;
    margin: 0px;
    padding: 0px;
}
.about-right{
	position: relative;
}
.about-slider .owl-nav {
    margin-top: -40px;
    position: relative;
}
.about-slider button.owl-prev {
    left: 20px;
    position: absolute;
}
.about-slider button.owl-next {
    position: absolute;
    right: 20px;
}
.owl-nav button:hover {
    color: var(--secondary-color)!important;
    background: none!important;
}
/***********Recent Works*****************/
.heading-section h4 {
    margin-bottom: 7px;
    text-align: center;
    color: var(--primary-color);
}
.heading-section p {
    text-align: center;
    font-weight: 700;
}
.heading-section {
    margin-bottom: 40px;
}
.work-slider .owl-nav {
    margin-top: -25px;
}
.work-slider  .owl-nav button.owl-next {
    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
}
.work-slider  .owl-nav button.owl-prev {
    position: absolute;
    left: -30px;
    top: 50%;
    transform: translateY(-50%);
}
.work-slider .owl-nav i {
    color: var(--primary-color);
    font-size: 20px;
}
.work-image {
    border: 10px solid var(--primary-color);
    width: 100%;
    height: 250px;
    overflow: hidden;
}
.work-image img {
    height: -webkit-fill-available!important;
	height:fill-avialable!important;
	height: -moz-available!important;
}

.our-service-box {
    margin-bottom: 40px;
    box-shadow: 0px 0px 2px 2px #cccccca6;
    padding: 15px;
}
.our-service-box h5 {
    margin-top: 5px;
    margin-bottom: 0px;
    padding: 10px;
}
.our-service-box p {
    margin-bottom: 0px;
    padding: 7px 10px;
}
.our-service-box .btn {
    margin-left: 10px;
}
.review-item .testi-box {
    box-shadow: none;
    border: 1px solid #ccc;
}
.work-slider .owl-dots {
    display:none!important;
}
.work-btn {
    color: var(--secondary-color);
}
.work-btn:hover{
    color: var(--primary-color);
}
/**************footer***************/

.footer {
    width: 100%;
    padding: 70px 0px 10px 0px;
    overflow: hidden;
    background: var(--primary-color);
    color: var(--third-color);
}
.footer-column {
    width: 100%;
    padding-bottom: 30px;
    display: grid;
    justify-content: center;
}
.footer h3 {
    font-weight: 300;
    text-transform: capitalize;
    margin-bottom: 25px;
    font-size: 25px;
}
.footer p {
    font-size: 18px;
    line-height: 40px;
    color: #fff;
}
.footer p i, .footer a i {
    font-size: 20px;
    margin-right: 7px;
    width: 20px;
}
.footer a {
    color: var(--third-color);

}
.bottom-lins li {
    margin-bottom: 10px;
}
.bottom-lins li a{
     font-size: 18px;   
}
.footer a:hover,.footer a.text-muted:hover {
    color: var(--secondary-color)!important;
}
/***************contact page**************/
.breadcrumbs {
    padding: 30px 0 30px 0;
    border-bottom: 1px solid #ededed;
    background-repeat: no-repeat!important;
    background-size: cover!important;
    background-position: center;
    background-color: #777777c4!important;
    background-blend-mode: multiply;
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0 0 5px 0;
    margin: 0;
    font-size: 14px;
    color: #ffffff7a;
    font-weight: 600;
	color: var(--primary-color);
}
.breadcrumbs ol li{
    list-style: none;
}
.breadcrumbs ol li + li::before {
    display: inline-block;
    padding-right: 10px;
    padding-left: 10px;
    color: #ffffff7a;
    content: "/";
}
.breadcrumbs ol li a {
    color: var(--third-color);
}
.breadcrumbs h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary-color);
}
.inner-page-body {
    padding: 50px 0px;
}
.contact .info {
    width: 100%;
    background: var(--third-color);
}
.contact .info h4 {
    padding: 0 0 0 60px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--secondary-color);
}
.contact .info p {
    padding: 0 0 0 60px;
    margin-bottom: 0;
    font-size: 12px;
    color: #9a9595;
}
.contact .info i {
    font-size: 20px;
    color: var(--third-color);
    float: left;
    width: 44px;
    height: 44px;
    background: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0px;
    transition: all 0.3s ease-in-out;
}
.contact .info .email, .contact .info .phone {
    margin-top: 40px;
}
.contact .php-email-form input {
    height: 44px;
}
.contact .php-email-form input, .contact .php-email-form textarea {
    border-radius: var(--border-none);
    box-shadow: none;
    font-size: 14px;
    border-radius: 0px;
}
/**********Inner page************/
.inner-page-body ul li, .inner-page-body ol li {
    margin-left: 20px;
    padding-left: 10px;
    margin-bottom: 7px;
    color: #000;
}
.inner-page-body ul li {
    list-style: disc;
}

/*----------respornsive-------*/

@media only screen and (max-width: 1199px) {

}

@media only screen and (max-width: 991px) {
.quick-form input[type="submit"] {
    height: auto;
    width: 40%;
    margin-left: 30%;
}
}

@media only screen and (max-width: 767px) {
.work-slider .owl-nav {
    display:none!important;
}
.work-slider .owl-dots {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex!important;
}
}

@media only screen and (max-width: 575px) {


}

@media only screen and (max-width: 425px) {

}


.testi-box {
    padding: 30px 40px;
    margin: 20px;
    box-shadow: 0px 0px 2px 3px #ccc;
}
.testi-name span:before {
    position: absolute;
    content: "-";
    font-weight: 600;
    left: 0px;
}
.testi-name span {
    position: relative;
    padding-left: 15px;
    font-weight: 600;
}


.zig-zag-wrap h1 { text-transform: uppercase; }
.zigzag-img {
    height: 320px;
    overflow: hidden;
    width: 100%;
    border: 4px solid var(--primary-color);
    margin: 0 15px;
}
.zigzag-img img {
    width: -webkit-fill-available;
	width: -moz-available; 
	width: fill-available;
}
.zigzag-img img { border: 1px solid #ccc; }
.zigzag-txt { text-align: left; width: 100%;}
.zigzag-txt p { line-height: 1.5; white-space: pre-line; margin-top: 15px; }
.zig-zag { margin-top: 15px; }