:root {
    
    --head-color: #FFB800;
    --sub-color: #000;
    --font-family: brigo;
    /* #ffa200 in decimal RGB */
    --main-color: rgb(170 99 29);
    --main-color-rgb:255,162,0;
    /* #151824 in decimal RGB */
    --color-two: rgb(21,24,36);
	--color-two-rgb:21,24,36;
	/* #555555 in decimal RGB */
	--color-three: rgb(85,85,85);
	--color-three-rgb:85,85,85;
    /* #ffffff in decimal RGB */
	--white-color:rgb(255,255,255);
	--white-color-rgb:255,255,255;
	/* #000000 in decimal RGB */
	--black-color:rgb(0,0,0);
	--black-color-rgb:0,0,0;

}
.home_pro_title, .pro_title {
    font-family: var(--font-family);
    padding-bottom: 20px;
    color: var(--main-color);
    font-size: 25px;
}









.header-top {
    display: none;
}
.navbar-nav li.active a, .navbar-nav li:hover a {
    color: #ffffff;
    background: unset;
}
.navigation-area {
    background: #fff;
    padding:  0;
}
.is-sticky .navigation-area {
    background: #ffffff none repeat scroll 0 0;
}
.is-sticky .navigation-area .navbar-nav li a {
    color: #012258;
}
.is-sticky .navigation-area .navbar-nav li.active a, .is-sticky .navigation-area .navbar-nav li:hover a {
    color: #012258;
}
.nav.navbar-nav li a {
    color: #012258;
    font-family: var(--font-family);
    font-size: 18px;
    font-weight: 100;
}
ul.nav.navbar-nav.text-right {
    margin-top: 22px;
}
.dropdown_menu li a {
    color: #fff !important;
    font-size: 14px !important;
}
.dropdown_menu {
    background-color: #002355;
    width: 260px;
}
.dropdown_menu li a {
    color: #fff !important;
    font-size: 14px !important;
}
.dropdown_menu:hover li a {
    color: #fff !important;
    font-size: 14px !important;
    padding: 10px 10px !important;
    border-bottom: 1px solid;
}
.dropdown:hover .dropdown_menu li a {
    color: #fff !important;
    font-size: 14px !important;
    padding: 10px 10px !important;
    border-bottom: 1px solid;
}

.product_title, .gallery_title, .about_title, .contact_title, .services_title {
    color: #ffffff !important;
    font-family: var(--font-family);
    font-size: 40px;
    position: relative;
}
.section-top {
    background: url(../../images/images/civil-one-brdcrmb.png);
    padding: 75px 0;
    background-repeat: no-repeat;
    background-size: cover;
}

.nav.navbar-nav li:hover a {
    color: #c1001e;
}

#home-slider .teashop-table {
    display: none;
}
.social-icons {
    display: none;
}
.bg-overlay:after {
    background: #00000026 none repeat scroll 0 0;
}

/*-----------Welcome-----*/


.welcome-one {
    padding: 50px 0;
}

.welcome-one{
    position:relative;
    padding: 120px 0px 60px;
}

.welcome-one_image-column{
	position:relative;
	margin-bottom: 30px;
}

.welcome-one_image-outer{
	position:relative;
}

.welcome-one_image{
	position:relative;
	opacity:0;
	clip-path: polygon(49% 0, 51% 0, 51% 100%, 49% 100%);
}

.welcome-one_image.now-in-view{
	opacity:1;
	-webkit-transition-delay: 500ms;
	-moz-transition-delay: 500ms;
	-ms-transition-delay: 500ms;
	-o-transition-delay: 500ms;
	transition-delay: 500ms;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.welcome-one_content-column{
	position:relative;
	margin-bottom: 30px;
}

.welcome-one_content-outer{
	position:relative;
}

.welcome-one_tag{
	position:relative;
	font-size:24px;
	display: flex;
	font-weight: 600;
	line-height:1em;
	align-content: center;
	color: var(--color-two);
	background-color:#f5f5f5;
	padding: 25px 25px 25px 35px;
	border-radius: 50px 0px 0px 50px;
}

.welcome-one_tag span{
	position:relative;
	line-height:1em;
	margin-right: 15px;
	color: var(--main-color);
	font-family: 'FontAwesome';
}

.welcome-one_experiance{
	position:relative;
	font-size:30px;
	display: block;
	font-weight: 600;
	line-height:1em;
	margin-top: 30px;
	color: var(--color-two);
}

.welcome-one_experiance .odometer{
	position:relative;
	font-size: 72px;
	line-height:1em;
	font-weight:700;
	margin-right: 20px;
	color: var(--main-color);
}

.welcome-one_content{
	position:relative;
	padding-left: 125px;
}

.welcome-one_content .award-box{
	position:absolute;
	left:0px;
	top:0px;
	width:101px;
	z-index:1;
	padding-bottom: 40px;
	text-align: center;
}

.welcome-one_content .award-box:before{
	position:absolute;
	content:'';
	left:10px;
	top:50px;
	right:10px;
	bottom:0px;
	background-color:#151824;
	clip-path: polygon(100% 0, 100% 100%, 50% 90%, 0 100%, 0 0);
}

.welcome-one_content .award-text{
	position:relative;
	font-size:16px;
	padding:0px 15px;
	color: #fff;
}

.welcome-one_content .award-text span{
	position:relative;
	display: block;
	font-size: 18px;
	font-weight: 500;
	padding-top: 10px;
	margin-top: 10px;
}

.welcome-one_content .award-text span:before{
	position:absolute;
	content:'';
	left: 50%;
	top:0px;
	width:30px;
	height: 2px;
	transform: translateX(-50%);
	background-color: var(--main-color);
}

.welcome-one_content .award-box .star{
	position:relative;
	width:101px;
	height:101px;
	z-index:1;
	font-size: 28px;
	line-height:101px;
	margin-bottom: 15px;
	color: #fff
}
.welcome-one_content .award-box .star:before {

    position: absolute;
    left: 37px;
}

.welcome-one_content .award-box .star:after{
	position:absolute;
	content:'';
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	z-index:-1;
	background:url(https://themecraze.net/html/qonstruct/assets/images/icons/circle.png) no-repeat;
}

.welcome-one_button{
	position:relative;
	margin-top: 30px;
}

.text_invert .sub {
    /*background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, rgb(21,24,36)), color-stop(50%, rgb(117, 126, 137)));
    background-image: linear-gradient(to right, rgb(21,24,36) 50%, rgb(117, 126, 137) 50%);*/
    background-size: 200% 100%;
    background-position-x: 100%;
    color: #000;
    background-clip: text;
    -webkit-background-clip: text;
    font-size: 33px;
    line-height: 1.5;
    font-family: brigo;
}
.welcome-one .sec-title_title {
    color: #a76400;
    font-weight: 800;
    font-size: 20px;
    padding-bottom: 10px;
}

.welcome-one_content .award-box .star:after{
    animation-name: rotateme; 
    animation-duration: 15s; 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-name: rotateme; 
    -webkit-animation-duration: 15s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}



@keyframes rotateme {
    
     0% {
        transform: rotate(0deg);
        opacity: 1;
      }

    50% {
        transform: rotate(-180deg);
      }
    100% {
        transform: rotate(-360deg);
        opacity: 1;
      }
}

.welcome-one .text {
    padding-top: 20px;
}

/*---------------Commitment-----*/

.service-block_one{
    position:relative;
	margin-bottom: 30px;
}

.service-block_one.style-two .service-block_one-inner{
	background-color: #f5f5f5;
}

.service-block_one-inner{
	position:relative;
	padding: 40px 40px;
	background-color:rgb(241 241 241);
}

.service-block_one-pattern{
	opacity: 0.80;
	background-repeat: no-repeat;
	background-position:right bottom;
}

.service-block_one-inner:before{
	position:absolute;
	content:'';
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	opacity:0;
	-webkit-transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
	transition:all 500ms ease;
	transform: scale(1,0.2);
	background-color: var(--color-two);
}

.service-block_one-inner:hover::before{
	opacity:1;
	transform: scale(1,1);
}

.service-block_one-icon{
	position:relative;
	line-height:1em;
	font-size:50px;
	color: var(--main-color);
	font-family: FontAwesome;
}
.service-one .sec-title {
    text-align: center;
}
.service-block_one-inner:hover .service-block_one-icon{
	animation: rubberBand 1s;
}

.service-block_one-number{
	position:relative;
	line-height:1em;
	font-size:80px;
	font-weight:800;
	
    display: inline-block;
    text-transform: capitalize;
    color: transparent;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: rgba(var(--color-two-rgb), 0.40);
}

.service-block_one-inner:hover .service-block_one-number{
	-webkit-text-stroke-color: rgba(var(--white-color-rgb), 0.40);
}

.service-block_one-title{
	position:relative;
	margin-top: 40px;
}

.service-block_one-title a {
    position: relative;
    color: var(--color-two);
    font-family: brigo;
    font-size: 25px;
}

.service-block_one-inner:hover .service-block_one-title a{
	color: var(--white-color);
}

.service-block_one-title a:hover{
	color: var(--main-color);
}

.service-block_one-list{
	position:relative;
	margin-top: 40px;
}

.service-block_one-list li{
	position:relative;
	font-size: 18px;
	padding-left: 30px;
	margin-bottom: 15px;
}

.service-block_one-list li:before {
    position: absolute;
    content: "\f00c";
    left: 0px;
    top: 0px;
    font-family: 'FontAwesome';
}

.service-block_one-list li:last-child{
	margin-bottom: 0px;
}

.service-block_one-inner:hover .service-block_one-list li{
	color: var(--white-color);
}


.align-items-center {
    align-items: center!important;
}

.justify-content-between {
    justify-content: space-between!important;
}
.flex-wrap {
    flex-wrap: wrap!important;
}
.d-flex {
    display: flex!important;
}
@keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

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


/*-------------------- label----------*/
.cta-one {
    position: relative;
    text-align: center;
    background-size: cover;
    padding: 120px 0px 120px;
    background-attachment: fixed;
    background-image: url(../../images/images/label/label.png);
    background-size: cover;
}

.cta-one:before{
	position:absolute;
	content:'';
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	opacity: 0.60;
	background-color: var(--color-two);
}

.cta-one_title {
    position: relative;
    color: var(--white-color);
    font-family: var(--font-family);
    padding: 0 338px;
}

.cta-one_text {
    position: relative;
    margin-top: 30px;
    line-height: 1.5;
    margin-bottom: 35px;
    color: var(--white-color);
    padding: 0 50px;
    font-size: 34px;
}
.cta-one_button.trans-900 {
    position: relative;
}

.cta-head {
    display: block;
    text-align: center;
    position: relative;
    background-position-x: 100%;
    padding: 10px 0;
    border: 1px solid;
    border-radius: 50px;
    background: var(--main-color);
    font-family: var(--font-family) !important;
}
.theme-btn.btn-style-three {
    background: #000;
    padding: 10px;
    border-radius: 5px;
    color: #fff;
}
.text-one {
    font-size: 20px;
    background: #000;
    padding: 10px;
    color: #fff;
    border-radius: 10px;
}

/*-----------------Fluid---------------------*/
.fluid-one{
    position: relative;
	background-position: right center;
	background-repeat: no-repeat;
    background-image: url(../../images/images/label/choose.png)
}

.fluid-one .outer-container{
	position: relative;
}

.fluid-one .left-box{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 50%;
	height: 100%;
	background-size: cover;
}

.left-box {
    background-image: url(../../images/images/why-choose/1.png);
}

.fluid-one_image{
	position: relative;
	display: none;
}

.fluid-one_image img{
	position: relative;
	width: 100%;
	display: block;
}

.fluid-one .right-box {
    position: relative;
    float: right;
    width: 50%;
    padding: 35px 15px 50px 50px;
}

.fluid-one .right-box_inner{
	position: relative;
	max-width: 580px;
}

.fluid-block_one{
	position:relative;
	z-index:1;
	margin-bottom: 30px;
}

.fluid-block_one:last-child{
	margin-bottom: 0px;
}

.fluid-block_one-inner{
	position:relative;
	padding-left: 70px;
}

.fluid-block_one-icon{
	position:absolute;
	left:0px;
	top:5px;
	width:48px;
	height:48px;
	font-size: 22px;
	line-height: 48px;
	text-align: center;
	display: inline-block;
	color: var(--white-color);
	font-family: 'FontAwesome';
	background-color: var(--main-color);
}

.fluid-block_one-icon:after{
	position:absolute;
	content:'';
	left:-8px;
	bottom:-8px;
	width: 48px;
	height: 48px;
	z-index:-1;
	background:url(../images/icons/vector.png) no-repeat;
}

.fluid-block_one-title {
    position: relative;
    color: var(--color-two);
    font-family: var(--font-family);
}

.fluid-block_one-text{
	position:relative;
	font-size: 18px;
	margin-top: 8px;
	line-height: 28px;
	color: var(--color-two);
}

.fluid-one_content{
	position:absolute;
	right:-40px;
	bottom:50px;
	padding: 40px 50px;
	border-top: 8px solid var(--main-color);
	background-color: var(--white-color);
	box-shadow: 0px 0px 15px rgba(0,0,0,0.20);
}

.fluid-one_content-inner{
	position:relative;
	padding-left: 80px;
	font-size: 20px;
	font-weight: 700;
	line-height: 32px;
	color: var(--color-two);
}

.fluid-one_content-icon{
	position:absolute;
	left:0px;
	top:0px;
	line-height:1em;
	font-size: 70px;
	font-weight: normal;
	color: var(--main-color);
	font-family: 'FontAwesome';
}
.right-box .sec-title {
    padding-bottom: 20px;
}
.right-box .sec-title_title {
    color: #a76400;
    font-weight: 800;
    font-size: 20px;
    padding-bottom: 10px;
}

/*--------------------------Carouse------------*/

.service-block {
  position: relative;
  z-index: 1;
}
.service-block .inner-box {
  position: relative;
  margin-top: 30px;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}
.service-block .inner-box:hover .image:after {
  opacity: 1;
  height: 100%;
}
.service-block .inner-box:hover .read-more {
  top: 20px;
}
.service-block .inner-box:hover .read-more .icon {
    -webkit-transform: none;
    transform: none;
    color: #fff;
}
.service-block .inner-box:hover .content-box {
    background-color: var(--main-color);
    padding: 22px 27px 36px 20px;
    z-index: 2;
}
@media (max-width: 575.98px) {
  .service-block .inner-box:hover .content-box {
    padding: 17px 20px 18px 20px;
  }
}
.service-block .inner-box:hover .content-box .inner {
  height: auto;
}
.service-block .image-box {
  position: relative;
}
.service-block .image {
  position: relative;
  width: 100%;
  margin-bottom: 0;
  overflow: hidden;
}

.service-block .image img {
  position: relative;
  width: 100%;
}
.service-block .content-box {
    background-color: rgb(0 0 0);
    padding: 20px 27px 20px 20px;
  position: absolute;
  bottom: 27px;
  left: 30px;
  right: 30px;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
  z-index: 2;
}
@media (max-width: 575.98px) {
  .service-block .content-box {
    bottom: 20px;
    left: 20px;
    right: 20px;
  }
}
.service-block .content-box .inner {
  position: relative;
  display: none;
  overflow: hidden;
}
.service-block .title {
  
  position: relative;
  margin-bottom: 0;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}
@media (max-width: 575.98px) {
  .service-block .title {
    font-size: 20px;
  }
}
.service-block .text {
  color: var(--text-color-bg-theme-color1);
  position: relative;
  margin-top: 12px;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}
@media (max-width: 575.98px) {
  .service-block .text {
    margin-top: 0;
  }
}
.service-block .read-more {
    color: var(--text-color-bg-theme-color1);
    position: absolute;
    right: 25px;
    top: 18px;
    font-size: 22px;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}
.slid-caro-serviz {
    padding: 60px 0;
    text-align: center;
}
.slid-caro-serviz .sec-title, .service-one .sec-title, .wrkng-prcs .sec-title {
    color: #a76400;
    font-weight: 800;
    font-size: 20px;
    padding-bottom: 10px;
}
.slid-caro-serviz .sec-title_title {
    padding-bottom: 15px;
}
.service-block .inner-box:hover .content-box .title a {
    color: #fff;
}
.service-block .title a {
    color: #fff;
}
/*---------------Pworking-process----*/
.process-section {
    position: relative;
    padding: 0 0 30px;
}
.process-block {
	position: relative;
	margin-bottom: 50px;
}

.process-block .inner-box {
	position: relative;
	text-align: center;
}

.process-block .inner-box:before {
	position: absolute;
	right: -60px;
	top: 200px;
	height: 45px;
	width: 102px;
	background-image: url(../images/icons/icon-twist-arrow.png);
	content: "";
}

.process-block:nth-child(3n 3) .inner-box:before {
	display: none;
}

.process-block .count {
	position: relative;
	display: inline-block;
	height: 60px;
	width: 60px;
	border-radius: 50%;
	font-size: 18px;
	line-height: 60px;
	color: #222222;
	font-weight: 700;
	background-color: #ebebeb;
	margin-bottom: 90px;
}

.process-block .count:before {
	position: absolute;
	top: 100%;
	left: 29px;
	height: 50px;
	width: 1px;
	background-color: #ff9600;
	content: "";
}

.process-block .icon-box {
	position: relative;
	display: block;
	height: 150px;
	width: 150px;
	text-align: center;
	line-height: 150px;
	font-size: 65px;
	margin: 0 auto 65px;
	border-radius: 50%;
	box-shadow: 0 0 18px rgba(0, 0, 0, 0.13);
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.process-block .inner-box:hover .icon-box {
	background-color: #222222;
	box-shadow: none;
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}

.process-block .icon-box .icon {
	position: relative;
	display: inline-block;
	color: #ff9600;
	width: 75px;
	margin: 0 auto;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.process-block.svg-box .icon-box .icon {
	height: 75px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.process-block.svg-box .icon-box .icon svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.process-block.svg-box .inner-box:hover .icon-box .icon {
	transform: rotateY(180deg) translate(-50%, -50%);
	left: auto;
	right: 50%;
}

.process-block.svg-box .inner-box:hover .icon-box .icon path {
	stroke: #ff9600;
}

.process-block.svg-box .inner-box:hover .icon-box .icon path {
	stroke: #fff;
}

.process-block .inner-box:hover .icon-box .icon {
	color: #ffffff;
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

.process-block h4 {
	display: block;
	font-size: 24px;
	line-height: 1.2em;
	color: #222222;
	font-weight: 700;
	margin-bottom: 20px;
}

.process-block h4 a {
    color: #ffffff;
    display: inline-block;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
    font-family: var(--font-family);
    background: var(--main-color);
    padding: 10px;
    border-radius: 10px;
}

.process-block h4 a:hover {
    color: #000000;
}

.process-block .title {
	display: block;
	font-size: 18px;
	color: #ff9600;
	font-weight: 700;
	font-family: "Raleway", sans-serif;
}

.process-section.alternate .process-block .inner-box:hover .icon-box {
	background-color: #ff9600;
}

.process-section.alternate .process-block .inner-box:hover .icon-box .icon {
	color: #222222;
}
.wrkng-prcs .sec-title {
    padding-bottom: 30px;
    text-align: center;
}
.wrk-step {
    background: #ebebeb;
    padding: 20px;
    border-radius: 20px;
}
/*QC FOOTER STYLE START*/
#qcfooter-block {padding: 40px 0px 0; background: #000; color: #fff;}
#qcfooter-block h3 {font-size: 16px;}
.footer-content {margin: 5px 0px;}
.footer-content .qc-brand {
    height: 47px;
    display: block;
    margin: 10px 0;
    position: relative;
    top: -13px;
}
.footer-content .qc-brand .qc-brand-logo {
    background: #e1e1e1;
    width: 60%;
    border-radius: 10px;
    height: 62px;
}
/*.footer-content .qc-brand img {height: 100%;}*/
.footer-content p {font-size: 16px; line-height: 2;}
.footer-content .quicklinks {margin: 0; padding: 0;}
.footer-content .quicklinks li {list-style: none; display: block;}
.footer-content .quicklinks li a {padding: 5px 0px; display: block; color: #fff;}
.footer-content .quicklinks li i {margin-right: 5px;}
.footer-content .social-links .qc-social-list {margin: 10px 0px; padding: 0; color: #ddd; font-size: 15px;}
.footer-content .social-links .qc-social-list li {display: inline-block; margin-right: 10px;}
.qc-social-list .qc-social .social {width: 40px;height: 40px;line-height: 40px;text-align: center;display: block;font-size: 16px;color: #fff; border: 1px solid #fff; border-radius: 3px;}
.footer-content .mobile-apps {display: flex; padding: 10px 0px;}
.footer-content .mobile-apps .mobApp {padding-right: 5px;}
.qcinput {border: 2px solid #fff; color: #fff; padding: 5px; margin-bottom: 10px;}
.qcEmailSubBtn {padding: 10px; line-height: 0;font-size: 14px; background: #26A69A; color: #fff; border: 2px solid transparent; margin-bottom: 5px; outline: none;}
.qcEmailSubBtn:hover, .qcEmailSubBtn:focus {background: #26A69A; color: #fff; border: 2px solid #fff; outline: none;}
.qcEmailSubBtn i {font-size: 13px;}
#qcfooter-copyrights {padding: 10px 0; background: #000000; border-top: 1px solid #ddd;}
#qcfooter-copyrights .copyright {font-size: 14px; color: #fff;}
#qcfooter-copyrights .developer {color: #fff; text-decoration: underline;}

/*QC FOOTER STYLE END*/



/*----------------About-Page-----------*/
.about-us{
    padding: 70px 0;
}

.about-image-box{
	position: relative;
	height: 100%;
	padding-right: 0;
	margin-right: 15px;
}

.about-us-image{
	height: 100%;
}

.about-us-image figure{
	display: block;
	height: 100%;
	border-radius: 10px;
}

.about-us-image figure img{
	width: 100%;
	height: 100%;
	border-radius: 10px;
	aspect-ratio: 1 / 1.305;
    object-fit: cover;
}

.about-experience-box{
	position: absolute;
	top: 10px;
	left: 10px;
	max-width: 250px;
	background: var(--accent-secondary-color) url('../images/icon-about-experience-box.svg') no-repeat;
	background-position: bottom 25px right 25px;
	background-size: 80px auto;
	border-radius: 10px;
	padding: 30px;
	z-index: 2;
}

.about-experience-box h2{
	font-size: 48px;
	line-height: 1em;
	color: var(--accent-color);
}

.about-experience-box h3{
	font-size: 20px;
	margin-top: 15px;
}

.about-experience-box p{
	margin: 10px 0 0;
	line-height: 1.4em;
	color: var(--primary-color);
}

.about-image-skill-bar-box{
	position: absolute;
	bottom: 80px;
	right: 0;
	background-color: var(--white-color);
	box-shadow: 5px 0 15px 0 rgba(0, 0, 0, 0.05);
	border-radius: 10px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	padding: 20px;
	animation: growthmove 3s infinite linear alternate;
	z-index: 2;
}

@keyframes growthmove{
	50%{
		right: 40px;
	}
}

.about-image-skill-bar-box .icon-box{
	position: relative;
	height: 50px;
	width: 50px;
	border-radius: 5px;
	background-color: var(--main-color);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.about-image-skill-bar-box .icon-box::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--primary-color);
    width: 100%;
    height: 100%;
    transform: rotate(180deg) scale(0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.about-image-skill-bar-box:hover .icon-box::before{
	transform: rotate(0) scale(1);
}

.about-image-skill-bar-box .icon-box img{
	position: relative;
	width: 100%;
	max-width: 24px;
	z-index: 1;
}

.about-image-skill-bar-box .skills-progress-bar{
	width: calc(100% - 65px);
}

.skills-progress-bar .skill-data{
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 15px;
}

.skills-progress-bar .skill-data .skill-title,
.skills-progress-bar .skill-data .skill-no{
	font-size: 14px;
	font-weight: 600;
	line-height: normal;
    color: var(--primary-color);
}

.skills-progress-bar .skillbar .skill-progress{
    position: relative;
    width: 100%;
    height: 10px;
    background: var(--divider-color);
    border-radius: 10px;
    overflow: hidden;
}

.skills-progress-bar .skillbar .skill-progress .count-bar{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: var(--accent-color);
    border-radius: 100px;
}

.about-us-contant{
	height: 100%;
	align-content: center;
}

.about-us-body{
	display: flex;
	flex-wrap: wrap;

	gap: 30px;
}

.about-us-list {
    width: calc(60% - 15px);
  
}

.about-us-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
}

.about-us-list ul li{
	position: relative;
    line-height: 1.5em;
    padding-left: 25px;
    margin-bottom: 10px;
}

.about-us-list ul li:last-child{
	margin: 0;
}

.about-info-box{
	width: calc(75% - 15px);
}

.about-author-Box{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
}
.about-us-contct {
    width: calc(38% - 15px);
}
.abt-cont-head {
    font-size: 34px;
    line-height: 1.2;
    font-family: var(--font-family);
    color: var(--main-color);
    text-align: left;
}

.about-author-image figure{
	display: block;
	border-radius: 50%;
}

.about-author-image figure img{
	width: 100%;
    max-width: 50px;
    border-radius: 50%;
}

.about-author-contant{
	width: calc(100% - 65px);
}

.about-author-contant h2{
	font-size: 20px;
}

.about-author-contant p{
	margin: 5px 0 0;
}

.about-us-btn{
	border-top: 1px solid var(--divider-color);
	padding-top: 30px;
	margin-top: 30px;
}
.abt-style li:before {
    position: absolute;
    left: 0px;
    content: "\f00c";
    top: 5px;
    color: var(--main-color);
    font-size: 18px;
    line-height: 1em;
    font-weight: 400;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
    font-family: 'FontAwesome';
}
.about-us-contant .sec-title_title {
    color: #a76400;
    font-weight: 800;
    font-size: 20px;
    padding-bottom: 10px;
}
.phn {
    color: #fff;
    font-family: var(--font-family);
    font-size: 31px;
    background: black;
    padding: 10px 10px 10px 15px;
    border-radius: 10px;
}

/*-------------test-Service---------------*/
.sidebar-page-container{
    position:relative;
	padding:120px 0px 90px;
}

.sidebar-page-container .content-side,
.sidebar-page-container .sidebar-side{
	margin-bottom:30px;
}

/* Sidebar Title */

.sidebar-widget{
	position:relative;
	margin-bottom:30px;
}

.sidebar-title{
	position:relative;
	margin-bottom:20px;
	text-transform:uppercase;
}

.sticky-top{
	z-index:1;
	top:110px;
}

/* Search Widget */

.sidebar .search-box .form-group{
	position:relative;
	margin:0px;
}

.sidebar .search-box .form-group input:focus   button{
	background-color: var(--main-color);
}

.sidebar .search-box .form-group input[type="text"],
.sidebar .search-box .form-group input[type="search"]{
	position:relative;
	line-height:28px;
	font-size:18px;
	padding:10px 50px 10px 30px;
	background:none;
	display:block;
	width:100%;
	height:64px;
	border-radius:50px;
	color:var(--black-color);
	transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-webkit-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
	background-color:var(--white-three);
	box-shadow:0px 0px 10px rgba(0,0,0,0.10);
}

.sidebar .search-box .form-group input::placeholder,
.sidebar .search-box .form-group textarea::placeholder{
	color:#666666;
}

.sidebar .search-box .form-group button{
	position:absolute;
	right:0px;
	top:0px;
	bottom: 0px;
	width:64px;
	width:64px;
	display:block;
	cursor:pointer;
	font-size:20px;
	line-height:50px;
	font-weight:normal;
	border-radius:50px;
	color:var(--white-color);
	transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-webkit-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
	background-color: var(--main-color);
}

.sidebar .search-box .form-group button:hover{
	background-color:var(--color-two);
	color:var(--white-color);
}

/* Category List */

.category-list{
	position: relative;
	z-index:1;
}

.category-list li{
	position: relative;
	z-index:1;
	margin-bottom: 15px;
}

.category-list li a{
	position: relative;
	display: block;
	font-size: 20px;
	z-index:1;
	font-weight:500;
	border-radius:5px;
	color: var(--white-color);
	text-transform: capitalize;
	padding: 28px 25px 28px 25px;
	background-color: var(--color-two);
	-webkit-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	transition:all 300ms ease;
}

.category-list li a:hover::before{
	opacity:0;
}

.category-list li span{
	position: absolute;
	right: 10px;
	top:10px;
	width:58px;
	height:58px;
	font-size:34px;
	line-height:60px;
	text-align:center;
	border-radius:5px;
	display:inline-block;
	color: var(--white-color);
	background-color: var(--main-color);
	font-family: 'FontAwesome';
}

.category-list li a:hover span{
	background-image:none;
	background-color: var(--black-color);
}

.category-list li a:hover{
	color: var(--white-color);
	background-color: var(--main-color);
}

.category-list li:last-child{
	margin-bottom: 0px;
}

/* Question Widget */

.question-widget{
	position:relative;
}

.question-widget .inner-box{
	position:relative;
	padding:60px 40px;
	border-radius:20px;
	text-align:center;
	background-position: right top;
	background-repeat: no-repeat;
	background-color:var(--black-color);
}

.question-widget-shadow{
	position: absolute;
    left: 0px;
    bottom: 0px;
    width: 107px;
    height: 114px;
    background-position: left bottom;
    background-repeat: no-repeat;
}

.question-widget .icon{
	position:relative;
	font-size:90px;
	line-height:1em;
	color:var(--main-color);
	font-family: "flaticon_qonstruct";
}

.question-widget .title{
	position:relative;
	margin-top: 30px;
	color:var(--white-color);
}

.question-widget .text{
	position:relative;
	margin-top: 20px;
	font-size:18px;
	line-height:30px;
	margin-bottom:25px;
	color:var(--white-color);
}

.question-widget .phone{
	position:relative;
	font-size: 24px;
	display: flex;
	gap: 15px;
    align-items: center;
    justify-content: center;
	color:var(--white-color);
}

.question-widget .phone .phone-icon {
    position: relative;
    width: 44px;
    height: 44px;
    font-size: 24px;
    font-weight: 700;
    line-height: 44px;
    text-align: center;
    border-radius: 50px;
    display: inline-block;
    color: var(--black-color);
    background-color: var(--white-color);
}
.question-widget .phone .phone-icon:before {
    position: absolute;
    content: "\f095";
    font-family: fontawesome;
    top: 2px;
    left: 12px;
}
.question-widget .phone:hover{
	color:var(--main-color);
}

.service-detail{
	position:relative;
}

.service-detail .inner-box{
	position:relative;
}

.service-detail .image{
	position:relative;
	overflow: hidden;
	margin-bottom: 30px;
	border-radius: 15px;
}

.service-detail .image img{
	position:relative;
	width:100%;
	display:block;
}

.service-detail h2{
	position:relative;
	margin-bottom: 30px;
}

.service-detail h3{
	position:relative;
	margin-bottom: 20px;
}

.service-detail_list{
	position:relative;
}

.service-detail_list li{
	position:relative;
	font-size: 16px;
	margin-bottom: 12px;
	padding-left: 25px;
	color: var(--color-three);
}

.service-detail_list li:before{
	position:absolute;
	content: "\f12c";
	left:0px;
	top:0px;
	color: var(--main-color);
	font-family: "flaticon_qonstruct";
}
.left-sidebar .text_invert .sub {
    font-size: 25px;
    margin-bottom: 10px;
}
.left-sidebar .abt-style li {
    position: relative;
    line-height: 1.5em;
    padding-left: 25px;
    margin-bottom: 10px;
}


/*-----Contact-page-*/
.contact-one_info-list{
    position: relative;
}

.contact-one_info-list li {
    position: relative;
    min-height: 80px;
    font-size: 16px;
    margin-bottom: 20px;
    padding-left: 77px;
    color: var(--black-color);
}

.contact-one_info-list li .icon {
    position: absolute;
    left: -74px;
    top: 6px;
    width: 50px;
    height: 50px;
    line-height: 80px;
    text-align: center;
    font-size: 20px;
    color: var(--white-color);
    background-color: var(--main-color);
    font-family: fontawesome;
}

.contact-one_info-list li strong{
	position: relative;
	display: block;
	font-weight: 700;
	font-size: 18px;
	margin-top: 5px;
	line-height: 30px;
	word-wrap: break-word;
	color: var(--black-color);
}
.contact-one_title-outer .fa:before {
   
    position: absolute;
    top: -13px;
    left: 17px;
}
.contact-one_title-outer {
    padding: 0;
}



/*-----------media-Query---------*/
@media (max-width: 767px){
#home-slider, .page-banner {
    margin-top: 0;
}
.navigation-area {
    position: relative;
}
.navbar-toggle.collapsed {
   
    margin-top: 33px;
}
.welcome-one {
    padding: 45px 0px 40px;
}
.cta-one_title {

    padding: 0;
}
.cta-one_text {
    
    font-size: 20px;
}
.cta-head {
    font-size: 22px;
    line-height: 1.5;
}
.fluid-one .right-box {
    
    width: 100%;
    padding: 0;
}

.left-box {
    display: none;
}
.cta-one {
    
    padding: 60px 0px 30px;
}
.fluid-one {
   
    padding: 30px 0;
}
.process-block .inner-box:before{
    display: none;
}
.about-us-contct {
    width: 100%;
}
.about-us-list {
    width: 100%;
}
.phn {
    
    width: max-content;
}
.pro-content img {
    width: 100% !important;
}
}