@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap');

* {
box-sizing:border-box;
}
body {
margin:0px;
padding:0px;
font-family: 'Rubik', sans-serif !important;
}
h1,h2,h3,h4,h5,h6,p {
padding:0px;
margin:0px;
font-family: 'Rubik', sans-serif !important;
}
ul,li,ol {
padding:0px;
margin:0px;
list-style:none;
font-family: 'Rubik', sans-serif !important;
}
.auto-container {
width:1170px;
margin:auto;
}

/*--------------header css-------------*/

.header-outer {
background:;
background-size:cover;
padding: 10px 0px;
width: 100%;
float: left;
position: absolute;
z-index: 999;
}
.nav-bar {
width:100%;
float:left;
}
.nav-left {
width:auto;
float:left;
}
.nav-left img {
width:150px;
}
.nav-right {
width: auto;
float: right;
padding-top: 21px;
}
.fixed {
position: fixed;
top: 0;
width: 100%;
z-index: 99;
left: 0;
background:#fff;
transition:0.5s;
border-bottom:1px #000 solid;
padding: 10px 0px;
}
.nav-right ul li {
width:auto;
display:inline-block;
}
.nav-right ul li a {
font-size: 18px;
color: #000;
text-decoration: none;
padding: 0px 20px;
font-weight: 600;
border-right: 1px #000 solid;
}
.nav-right ul li a:hover {
color: #F7C221;
border: 1px #F7C221 dotted;
padding: 20px;
border-right: 1px solid;
}
.nav-right ul li a:active {
color: #F7C221;
}

/*----------------slider--------------*/

.slider-outer {
width: 100%;
float: left;
position:relative;
}
.owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled {
display: block !important;
}
.owl-theme .owl-nav {
margin-top: 0 !important;
}
.owl-dots {
display: none;
}
.owl-theme .owl-nav [class*=owl-]:hover {
background: none !important;
color: #FFF;
text-decoration: none;
}
.owl-nav button.owl-next span, .owl-nav button.owl-prev span {
font-size: 50px;
color: #F7C221;
border: 1px #F7C221 dotted;
padding: 10px 23px;
}
button span:hover {
background:none;
}
button.owl-prev {
position: absolute;
top: 40%;
left: 5%;
}
button.owl-next {
position: absolute;
top: 40%;
right: 5%;
}

/*----------------why us --------------*/

.why-choose-outer {
width: 100%;
float: left;
padding: 20px 0px;
text-align:center;
position:relative;
background:url(../images/our-services-bg.jpg) top center no-repeat fixed;
background-size:cover;
}
.why-choose-outer:before {
content:"";
background:#000000ed;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
.why-choose-outer h1 {
font-size: 40px;
padding: 20px !important;
margin: 0px;
color: #fff;
position:relative;
font-weight: 400;
}
.why-choose-outer h2 {
font-size: 28px;
margin: 20px 0px 20px;
color: #fff;
font-weight:600;
position:relative;
}
.why-choose-outer p {
font-size: 17px;
text-align: center;
color: #fff;
margin-bottom: 10px;
position:relative;
}
.why-choose-outer p span {
color: #fff;
font-size: 22px;
font-weight: 400;
}
.service-inner {
width: 100%;
float: left;
padding: 40px 0px 0px;
}
.service-inner {
width: 100%;
float: left;
padding-top: 60px;
position: relative;
}
.service {
width: 31%;
float: left;
margin-right: 20px;
background: rgba(217, 151, 35, 0.85);
padding: 10px;
min-height: 230px;
}
.service .fa {
background: #fff;
padding: 25px 25px;
font-size: 35px;
width: 100px;
height: 100px;
border-radius: 100%;
margin-top: -63px;
border: 9px rgba(217, 151, 35, 0.85) solid;
}
.service h3 {
font-size: 25px;
margin: 10px 0px;
color: #fff;
}
.service p {
font-size: 15px;
color: #fff;
line-height: 27px;
}






/*----------------Footer--------------*/

.footer-outer {
width:100%;
float:left;
background-color:#000;
padding-top:20px;
}
.footer-inner {
width:100%;
float:left;
padding:20px 0px;
}
.main-links {
width: 33%;
float: left;
}
.main-links ul {
margin-right:20px !important;
}
.main-links ul h4 {
font-size:25px;
color:#fff;
margin-bottom:20px !important;
position:relative;
}
.main-links ul li {
padding: 5px 0px!important;
border-bottom: 1px #ffffff54 solid;
list-style:none;
}
.main-links ul li .fa {
font-size: 15px;
color: #fff;
margin-right: 10px;
}
.main-links  ul li a{
font-size:15px;
color: rgba(217, 151, 35, 0.85);
transition:0.8s;
}
.main-links  ul li a:hover {
color:#fff;
}
.copyright {
width:100%;
float:left;
background:rgba(217, 151, 35, 0.85);
padding:10px 0px;
}
.copy-left {
width:auto;
float:left;
}
.copy-left ul li {
display: inline;
}
.copy-left ul li .fa {
color: #fff;
font-size: 20px;
padding-right: 14px !important;
}
.copy-right {
width:auto;
float:right;
}
.copy-right p {
font-size:15px;
color:#fff;
}


/*----------------our services us --------------*/



.wrapper.tab-item h3 {
font-size: 40px;
font-weight: 600;
text-align: center;
position: relative;
margin-bottom:30px;
}


.wrapper.tab-item h3:after {
position: absolute;
content: "";
bottom: 0;
left: 481px;
width: 18%;
height: 2px;
background: #000;
}


.column-12,
.wrapper-full {
	width: 100%;
	float:left;
}
.ex_padd {
	padding-top: 170px!important
}
.box-tab {
margin: 10px 10px;
width: 31%;
float: left;
}
.effect {
	margin: auto;
	box-shadow: 0 0 15px 5px rgba(0, 0, 0, .07);
	background-color: #fff;
	border: 5px solid #f5f5f5
}
.tab-container {
	padding: 50px 0
}

.tab-head {
	text-align: center;
	padding-bottom: 10px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto
}

.tab .effect {
	position: relative;
	overflow: hidden;
	max-height: 240px;
	max-width: 350px;
	background: #3085a3;
	text-align: center;
	cursor: pointer
}

.grid-width3,
.grid-width6 {
	max-height: 400px!important;
	max-width: 530px!important
}

.grid-width8 {
	max-width: 700px!important
}

.tab .effect img {
	position: relative;
	display: block;
	min-height: 100%;
	opacity: .8
}

.tab .effect .tab-text {
	padding: 50px;
	color: #fff;
	font-size: 1.25rem;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}

.tab-text h2 {
color: #000;
margin: 0;
font-weight: 600;
font-size: 1.5rem;
}

.tab-text p {
	color: #fff;
	margin: 0;
	font-size: 1rem
}

.hide {
	display: none
}
.box {
width: 42%;
float: left;
margin: 15px 40px;
}



@media (max-width:1000px) {
	.header h1 {
		padding-left: 70px
	}
	.rotate {
		left: 30px
	}
}
.effect.effect-twelve {
border: 8px #000 solid;
background: rgba(217, 151, 35, 0.85);
}

.effect-twelve .tab-text h2 {
	position: relative;
	padding: .5em 0;
	text-align: left;
	overflow: hidden;
	font-family: Oswald
}

.effect.effect-twelve h2:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: #000;
	transform: translate3d(-100%, 0, 0);
	transition: all .35s;
	-webkit-transform: translate3d(-100%, 0, 0);
	-webkit-transition: all .35s
}

.effect.effect-twelve:hover h2:after {
	transform: translate3d(0, 0, 0)
}

.effect-twelve .tab-text p {
color: #000;
padding: .7em 0;
font-size: 15px;
text-align: left;
line-height: 23px;
transform: translate3d(100%, 0, 0);
-webkit-transform: translate3d(100%, 0, 0);
opacity: 0;
transition: all .35s;
-webkit-transition: all .35s;
text-transform: initial;
}
.effect-twelve:hover p {
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	opacity: 1
}

.effect.effect-twelve img {
	max-width: none;
	opacity: 1;
	transform: translate3d(-10px, 0, 0);
	transition: all .35s;
	-webkit-transform: translate3d(-10px, 0, 0);
	-webkit-transition: all .35s
}

.effect.effect-twelve:hover img {
	transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	opacity: .4
}



@media (max-width:575px) {
	.effect.effect-two p.description {
		bottom: 5.8em
	}
}

@media (min-width:576px) and (max-width:767px) {
	.tab .effect .tab-text h2 {
		font-size: 1.3rem!important;
		font-family: Oswald
	}
	.effect.effect-two p.description {
		bottom: 5.8em
	}
}

@media (min-width:768px) and (max-width:991px) {
	.effect h2 {
		font-size: 1.3rem!important
	}
}



/*-------------------Title CSS---------------------*/

.title-outer {
width: 100%;
margin: 80px 0px 0px;
float: left;
padding: 100px 0px;
background: url(../images/bg.png) top center repeat;
background-size: cover;
}
.title-outer h1 {
color: #fff;
font-size: 50px;
text-align: center;
}

/*-------------------Page Content CSS---------------------*/

.page-content-outer {
width: 100%;
float: left;
padding: 20px 0px;
position:relative;
}
.page-content-outer:before {
width: 250px;
height: 250px;
background: #fff;
border: 5px rgb(217 151 35 / 16%) dotted;
content: "";
position: absolute;
right: 0;
top: 20%;
z-index: -1;
}
.page-content-outer h2 {
font-size: 25px;
font-weight: 600;
margin-bottom: 10px;
}
.page-content-outer img{
width: 500px;
float: left;
margin:0px 20px 20px 0px;
}
.page-content-outer p {
font-size: 17px;
line-height: 30px;
color: #000;
margin-bottom:10px;
}



/*-------------------Contact CSS---------------------*/

.contact-outer {
width: 100%;
float: left;
padding: 40px 0px;
position:relative;
}
.contact-outer:after {
width: 250px;
height: 250px;
background: #fff;
border: 5px rgb(217 151 35 / 16%) dotted;
content: "";
position: absolute;
left: 0;
top: 20%;
}
.contact-left {
width: 50%;
float: left;
z-index: 99;
position: relative;
}
.contact-left ul li .fa {
color: #fff;
font-size: 20px;
background: #000;
width: 50px;
height: 50px;
padding: 16px;
margin-right:5px;
border-radius:100px;
}
.contact-left ul li .fa:hover {
color: #fff;
background: rgba(217, 151, 35, 0.85);
}
.contact-left li {
margin-bottom: 11px;
}
.contact-left ul li a {
color: #000;
font-size: 20px;
}
.contact-outer h4 {
color: #000;
font-size: 30px;
margin-bottom: 20px;
position:relative;
}
.contact-outer h4:after {
content:"";
position:absolute;
bottom:0;
left:0;
width:100px;
background:#000;
height:2px;
}
.contact-right {
width: 50%;
float: right;
z-index: 99;
position: relative;
}
input[type="text"] {
width: 100%;
font-size: 15px;
padding: 7px;
margin-bottom: 11px;
font-family: 'Rubik', sans-serif !important;

}
input[type="email"] {
width: 100%;
font-size: 15px;
padding: 7px;
margin-bottom: 11px;
font-family: 'Rubik', sans-serif !important;

}
textarea {
width: 100% !important;
font-size: 15px;
padding: 7px;
margin-bottom: 11px;
height:100px !important;
font-family: 'Rubik', sans-serif !important;
}
input.submit-button {
padding: 10px 25px;
background: rgba(217, 151, 35, 0.85);
color: #fff;
font-size: 18px;
border: none;
cursor:pointer;
transition:1s;
font-family: 'Rubik', sans-serif !important;
}
input.submit-button:hover {
background: #efc22b;
color: #000;
}


.closebtn {
display: none;
}
.menubutton
{
display:none;
}