@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}
.fonts {
	font-family: "Anton", sans-serif;
	font-family: "PT Serif", serif;
}
@media (min-width: 1400px) {
	.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
	  max-width: 1440px;
	}
  }
body {
	margin: 0;
	font-family: "PT Serif", serif;
	font-size: 16px;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0px;
	padding: 0px;
	margin-bottom: 10px;
	font-family: "Anton", sans-serif;
}
h1 {
	font-size: 30px;
}
h2 {
	font-size: 26px;
}
h3 {
	font-size: 24px;
}
h4 {
	font-size: 22px;
}
h5 {
	font-size: 20px;
}
h6 {
	font-size: 18px;
}
a {
	text-decoration: none;
}
.floating_icon {
	position: fixed;
	right: 15px;
	top: 200px;
}
.header {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	z-index: 999;
}
.inner_header {
	position: inherit;
	background: url(../images/inner_header_bg.webp) top center no-repeat;
	background-size: cover;
}
.header .container-fluid {
	max-width: 90%;
}
.logo {
	margin-top: -35px;
}
.top_phone {
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	padding: 10px 0;
}
.top_phone i {
	background: linear-gradient(to right, #b9b9b9, #eef4f6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
	margin-right: 10px;
}
.landing-search-small {
    position: relative;
    overflow: hidden;
}

.sliding-input {
    width: 0;
    opacity: 0;
    transition: width 0.4s ease, opacity 0.4s ease; /* Smooth slide and fade */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* Center vertically */
    z-index: 1;
	color: #fff !important;
	background-image: url(images/quote_cta_bg.webp);
	background-repeat: no-repeat;
	background-size: auto;
}

.landing-search-small:hover .sliding-input {
    width: 150px; /* Desired width of the input when fully visible */
    opacity: 1;
}
.main_menu {
	background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 0.80) 33%,rgba(0, 0, 0, 0.93) 49%,rgba(0, 0, 0, 0.80) 66%,rgba(0, 0, 0, 0) 100%);
	padding:25px 0;
}
.main_menu #mega-menu-wrap-main_nav #mega-menu-main_nav > li.mega-menu-item > a.mega-menu-link {
	line-height: inherit !important;
	height: auto;
	text-transform: uppercase;
	font-family: "PT Serif", serif;
	padding: 5px 20px 5px 20px;
	border:0px solid #4a4a4a;
}
.main_menu li.mega-menu-item.mega-current-menu-item a {
	position: relative;
	border-left:1px solid #4a4a4a !important;
	border-right:1px solid #4a4a4a !important;
}
.main_menu li.mega-menu-item a:hover {
	border-left:1px solid #4a4a4a !important;
	border-right:1px solid #4a4a4a !important;
}
.main_menu li.mega-menu-item a:hover::before,
.main_menu li.mega-menu-item a:hover::after,
.main_menu li.mega-menu-item.mega-current-menu-item a::before, 
.main_menu li.mega-menu-item.mega-current-menu-item a::after {
    content: "" !important;
    position: absolute !important;
    z-index: 1;
    pointer-events: none;
    transition: all 0.3s ease;
}
.main_menu li.mega-menu-item a:hover::before,
.main_menu li.mega-menu-item.mega-current-menu-item a::before {
    top: 0px !important;
    left: 0px;
    width: 100% !important;
    height: 100% !important;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(to right, #757575, #f5f5f5, #757575) 1;
    border-image-slice: 1;
}
.main_menu li.mega-menu-item a:hover::after,
.main_menu li.mega-menu-item.mega-current-menu-item a::after {
    top: 0px;
    left: 0px;
    width: 100% !important;
    height: 100% !important;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-image: linear-gradient(to bottom, #757575, #f5f5f5, #757575) 1;
    border-image-slice: 1;
}

.quote_cta {
	margin-top: 12px;
	text-align: right;
	margin-left: -15px;
}
.quote_cta a {
    background: url(../images/quote_cta_bg.webp) center center no-repeat;
    background-size: cover;
    color: #fff;
    position: relative;
    padding: 15px 35px;
    text-transform: uppercase;
    display: inline-block;
}

.quote_cta a::before, .quote_cta a::after {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
    transition: all 0.3s ease;
}

.quote_cta a::before {
    top: 5px;
    left: 5px;
    width: 96%;
    height: 82%;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(to right, #757575, #f5f5f5, #757575) 1;
    border-image-slice: 1;
}

.quote_cta a::after {
    top: 5px;
    left: 5px;
    width: 96%;
    height: 82%;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    border-image: linear-gradient(to bottom, #757575, #f5f5f5, #757575) 1;
    border-image-slice: 1;
}

.quote_cta a:hover::before, .quote_cta a:hover::after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* ............................. common cta css.............................. */
.default_cta {
	margin-top: 30px;
}
.default_cta a {
    background: url(../images/quote_cta_bg.webp) center center no-repeat;
    background-size: cover;
    color: #fff;
    position: relative;
    padding: 12px 35px;
    text-transform: uppercase;
    display: inline-block;
}

.default_cta a::before, .default_cta a::after {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
    transition: all 0.3s ease;
}

.default_cta a::before {
    top: 5px;
    left: 5px;
    width: 96%;
    height: 82%;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(to right, #757575, #f5f5f5, #757575) 1;
    border-image-slice: 1;
}

.default_cta a::after {
    top: 5px;
    left: 5px;
    width: 96%;
    height: 82%;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-image: linear-gradient(to bottom, #757575, #f5f5f5, #757575) 1;
    border-image-slice: 1;
}

.default_cta a:hover::before, .default_cta a:hover::after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* ............................. common cta css.............................. */

.banner {
	background: url(../images/banner_bg.webp) top center no-repeat;
	min-height: 500px;
	background-size: cover;
}

/*...........current projects ................*/
.current_projects {
	background: url(../images/current_projects_bg.webp) top center no-repeat;
	padding: 45px 0;
	background-size: cover;
	padding-bottom: 0px;
}
.current_projects .container-fluid {
	max-width: 100%;
}
.gallery_row {
	margin-bottom: -45px;
}
.current_projects h1 {
	text-align: center;
	color: #fff;
}
.current_projects .owl-carousel .item {
	position: relative;
	background: #000;
}
.tab_list {
	text-align: center;
}
ul#myTab {
	text-align: center;
	margin-bottom: 30px;
	display: inline-block;
	position: relative;
}
ul#myTab::before, ul#myTab::after {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
    transition: all 0.3s ease;
}

ul#myTab::before {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(to right, #757575, #f5f5f5, #757575) 1;
    border-image-slice: 1;
}

ul#myTab::after {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    border-image: linear-gradient(to bottom, #757575, #f5f5f5, #757575) 1;
    border-image-slice: 1;
}

ul#myTab li {
	display: inline-block;
}
ul#myTab .custom-tab-button {
    color: #fff; 
    padding: 12px 35px;  
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    transition: background 0.3s ease;
    border:none;
}
.custom-tab-button:hover {
     background:url(../images/custom_tab_btn_bg.png) top center no-repeat;
    background-size: cover;
    border-image: none;
}

.custom-tab-button:focus {
    outline: none;
    box-shadow: none;
     border-image: none;
}

.custom-tab-button.active {
    background:url(../images/custom_tab_btn_bg.png) top center no-repeat;
    background-size: cover;
     border-image: none;
}

 
 
.current_projects .owl-carousel .item img {
    height: auto; /* Ensure the image height is adjusted proportionally */
    max-height: 400px; /* Set a max height for consistency */
    width: auto; /* Allow width to be auto-adjusted based on the image's aspect ratio */
    display: block;
    margin: 0 auto; /* Center images */
     opacity: 0.7 !important; /* Adjust the value as needed (0 = fully transparent, 1 = fully opaque) */
    transition: opacity 0.3s ease;
     
}
.current_projects .owl-carousel .item img:hover {
     opacity: 0.3 !important; /* Fully opaque on hover */
}
.current_projects .owl-carousel .item:hover::before, 
.current_projects .owl-carousel .item:hover::after {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
    transition: all 0.3s ease;
}

.current_projects .owl-carousel .item:hover::before {
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(to right, #757575, #f5f5f5, #757575) 1;
    border-image-slice: 1;
}

.current_projects .owl-carousel .item:hover::after {
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    border-image: linear-gradient(to bottom, #757575, #f5f5f5, #757575) 1;
    border-image-slice: 1;
}
 
.current_projects .owl-carousel .item a {
    display: block; /* Ensure the link covers the item */
    position: relative; /* Needed for the positioning of the icon */
}

.zoon_icon {
	display: none;
	font-size: 40px;
	position: absolute;
	z-index: 9;
	color: #fff;
	left: 45%;
	top: 42%;
}
.current_projects .owl-carousel .item a:hover .zoon_icon {
    display: block; 
}

.owl-carousel {
	display: block;
}
.current_projects .uk-button {
	padding: 0px;
}
.current_projects .owl-carousel.owl-drag .owl-item {
	margin-right: 0px !important;
}
.owl-theme .owl-dots {
	display: none;
}
.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev {
	position: absolute;
	color: #fff !important;
	font-size: 30px !important;
	top: 37%;
	z-index: 5;
	width: 60px;
  height: 55px;
  text-align: center;
}
.owl-carousel .owl-nav button.owl-next {
	right: 15%;
}
.owl-carousel .owl-nav button.owl-prev {
	left: 15%;
}
.owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel .owl-nav button.owl-next:hover {
	background: none;
}
.owl-carousel .owl-nav button.owl-prev::before,
.owl-carousel .owl-nav button.owl-prev::after,
.owl-carousel .owl-nav button.owl-next::before, 
.owl-carousel .owl-nav button.owl-next::after {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
    transition: border-image 0.3s ease, all 0.3s ease; /* Smooth transition */
}

.owl-carousel .owl-nav button.owl-prev::before,
.owl-carousel .owl-nav button.owl-next::before {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(to right, #757575, #f5f5f5, #757575) 1;
    border-image-slice: 1;
}

.owl-carousel .owl-nav button.owl-prev::after,
.owl-carousel .owl-nav button.owl-next::after {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    border-image: linear-gradient(to bottom, #757575, #f5f5f5, #757575) 1;
    border-image-slice: 1;
}
.owl-carousel .owl-nav button.owl-prev:hover::before,
.owl-carousel .owl-nav button.owl-prev:hover::after,
.owl-carousel .owl-nav button.owl-next:hover::before, 
.owl-carousel .owl-nav button.owl-next:hover::after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* Hover Styles for Reverse Linear Gradient */
.owl-carousel .owl-nav button.owl-prev:hover::before,
.owl-carousel .owl-nav button.owl-prev:hover::after {
    border-image: linear-gradient(to right, #f5f5f5, #757575, #f5f5f5) 1; /* Reverse the gradient */
}

.owl-carousel .owl-nav button.owl-next:hover::before,
.owl-carousel .owl-nav button.owl-next:hover::after {
    border-image: linear-gradient(to bottom, #f5f5f5, #757575, #f5f5f5) 1; /* Reverse the gradient */
}

/*...........current projects ................*/
.about_sec {
	background: url(../images/about_sec_bg.webp) top center no-repeat;
	background-size: cover;
	padding: 60px 0;
	padding-bottom: 90px;
}
.about_content {
	text-align: center;
}
.about_content h3 {
	font-size: 22px;
	text-transform: uppercase;
	font-family: "PT Serif", serif;
	margin-bottom: 0px;
}
.srv_list {
	text-align: center;
}
.service_img {
	text-align: center;
	margin: 0 auto;
	max-width: 130px;
}
.service_img img {
	max-width: 100%;
	height: auto;
	transition: filter 0.3s ease;
}
.service_img img:hover {
    filter: grayscale(100%) brightness(0);
 }
.srv_list h2 {
	font-size: 28px;
	font-weight: bold;
	font-family: "PT Serif", serif;
}
.srv_list h2 a {
	color: #454545;
	transition: color 0.3s ease;
}
.srv_list h2 a:hover {
	color: #000;
	text-decoration: none;
}
/*...........strip banner ................*/
 
.strip_contact_banner {
	background: url(../images/strip_contact_banner_bg.webp) top center no-repeat;
	background-size: cover;
	position: relative;
	padding: 30px 45px;
	margin-top: -55px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.strip_detail {
	font-size: 26px;
	color: #fff;
	max-width: 60%;
	line-height: 29px;
}
.strip_phone {
	color: #fff;
	font-size: 36px;
}
.strip_phone i {
	margin-right: 10px;
}
.strip_contact_banner::before, .strip_contact_banner::after {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
    transition: all 0.3s ease;
}
.strip_contact_banner::before {
    top: 15px;
    left: 15px;
    width: 97.7%;
  height: 80%;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(to right, #757575, #f5f5f5, #757575) 1;
    border-image-slice: 1;
}
.strip_contact_banner::after {
    top: 15px;
    left: 15px;
    width: 97.7%;
  height: 80%;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    border-image: linear-gradient(to bottom, #757575, #f5f5f5, #757575) 1;
    border-image-slice: 1;
}
/*...........strip banner ................*/
/*...........Client Section ................*/
.clients_sec {
	padding: 30px 0;
	padding-bottom: 45px;
}
.clients_sec h1 {
	text-align: center;
}
.client_reviews {
	background: url(../images/reviews_bg.webp) top center no-repeat;
	background-size: cover;
	padding: 60px;
    position: relative;
    color: #fff;
    z-index: 0;
}
.left_quote_icon {
	position: absolute;
	left: 30px;
	top: 30px;
}
.right_quote_icon {
	position: absolute;
	right: 30px;
	bottom: 30px;
}
.client_reviews::before,
.client_reviews::after {
    content: "";
    position: absolute;
    z-index: 1;
    border: 2px solid transparent;
    pointer-events: none;
    transition: all 0.3s ease;
}

.client_reviews::before {
	left: 30px;
	bottom: 30px;
	border-bottom: 1px solid #757575;
	border-left: 1px solid #757575;
	width: calc(84% - 20px);
	height: calc(72% - 40px);

	background: linear-gradient(to right, #757575, #f5f5f5, #757575) bottom, 
                linear-gradient(to bottom, #757575, #f5f5f5, #757575) left;
    background-size: 100% 2px, 2px 100%;
    background-repeat: no-repeat;
}
.client_reviews::after {
	top: 30px;
	right: 30px;
	bottom: 10px;
	border-top: 1px solid #757575;
	border-right: 1px solid #757575;
	width: calc(86% - 40px);
	height: calc(68% - 20px);
	/* Left to right gradient on top and bottom borders */
    background: linear-gradient(to right, #757575, #f5f5f5, #757575) top,
                linear-gradient(to bottom, #757575, #f5f5f5, #757575) right;
    background-size: 100% 2px, 2px 100%;
    background-repeat: no-repeat;
}

.rewiew_details {
	color: #fff;
	text-align: center;
}
.rewiew_details h3 {
	font-size: 28px;
	font-weight: bold;
	font-family: "PT Serif", serif;
	color: #fff;
}
.clients_sec .owl-theme .owl-dots {
	display: block;
}
.review_icon {
	width: 92px;
	height: 96px;
	margin: 0 auto;
	overflow: hidden;
	margin-bottom: 15px;
	border:2px solid #fff;
	text-align: center;
	position: relative;
}
.review_icon img {
	max-width: 100%;
	height: auto;
}
.review_icon i {
	color: #b0b0b0;
	font-size: 75px;
	position: absolute;
	bottom: -7px;
	left: 13%;
}
.rewiew_details .content {
	height: 70px;
}
.our_clients ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.our_clients ul li {
	 list-style: none;
	 width: 48%;
}
.c_logo {
	position: relative;
	margin-bottom: 20px;
}
.c_logo::before, .c_logo::after {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
    transition: all 0.3s ease;
}

.c_logo::before {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(to right, #b7b7b7, #f5f5f5, #b7b7b7) 1;
    border-image-slice: 1;
}

.c_logo::after {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    border-image: linear-gradient(to bottom, #b7b7b7, #f5f5f5, #b7b7b7) 1;
    border-image-slice: 1;
}

.c_logo:hover::before, .c_logo:hover::after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.c_logo:hover::before {
	border-image: linear-gradient(to right, #f5f5f5, #757575, #f5f5f5) 1;
}

.c_logo:hover::after {
	border-image: linear-gradient(to bottom, #f5f5f5, #757575, #f5f5f5) 1;
}
.our_clients .content {
	height: 430px;
}
/*...........Client Section ................*/

/*...........................footer ...................*/
.footer {
	background: url(../images/footer_bg.webp) top center no-repeat;
	background-size: cover;
	padding: 30px 0;
}
.foot_nav {
	padding: 15px 0;
}
.foot_nav ul {
	margin: 0px;
	padding: 0px;
	text-align: center;
}
.foot_nav ul li {
	list-style: none;
	display: inline-block;
}
.foot_nav ul li a {
	color: #fff;
	text-transform: uppercase;
	padding: 0 20px;
	font-size: 17px;
	border-right: 1px solid #fff;
}
.foot_nav ul li:last-child a {
	border-right: 0px solid #fff;
}
.footer hr {
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%,#FFFFFF 21%,#FFFFFF 80%,rgba(255, 255, 255, 0) 100%);
	height: 4px;
	border: none;
}
.footer .hr2 {
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%,#FFFFFF 21%,#FFFFFF 80%,rgba(255, 255, 255, 0) 100%);
	height: 4px;
	border: none;
	margin-top: 25px;
	background: linear-gradient(90deg, rgba(41, 128, 185, 0) 0%,#FFFFFF 20%,#ecf0f1 47%,rgba(236, 240, 241, 0) 47%,rgba(46, 204, 113, 0) 53%,#FFFFFF 53%,#FFFFFF 80%,rgba(234, 76, 136, 0) 100%)
}
.f_block {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	margin: 15px auto;
}
.f_block::after {
	width: 1px;
	height: 67px;
	content: '';
	position: absolute;
	right: 6px;
	background: #d5d5d5;
	top: -7px;
}
.phone_block::after {
	right: 35px;
}
.email_block::after {
	right: -15px;;
}
.email_block {
	margin-left: -20px;
}
.address_block::after {
	display: none;
}
.address_block {
	padding-left: 30px;
}
.fc_icon {
	color: #fff;
	text-align: center;
	width: 48px;
	height: 48px;
	position: relative;
	font-size: 28px;
	padding-top: 3px;
	margin-right: 6px;
}
.fc_icon::before, .fc_icon::after {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
    transition: all 0.3s ease;
}

.fc_icon::before {
    top: 0px;
    left: 0px;
    width: 48px;
    height: 48px;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(to right, #757575, #f5f5f5, #757575) 1;
    border-image-slice: 1;
}

.fc_icon::after {
    top: 0px;
    left: 0px;
    width: 48px;
    height: 48px;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    border-image: linear-gradient(to bottom, #757575, #f5f5f5, #757575) 1;
    border-image-slice: 1;
}

.fc_icon:hover::before, .fc_icon:hover::after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.c_dtails {
	color: #fff;
	margin-left: 5px;
	font-size: 20px;
	margin-top: -10px;
	
}
.c_dtails.email {
	 margin-top: -8px;
} 
.c_dtails p {
	margin: 0px;
}
.c_dtails p span {
	font-size: 24px;
}
.c_dtails.email p span {
	font-size: 18px;
}
.copyright {
	color: #fff;
}
.powered_by {
	color: #fff;
	text-align: right;
}
.area_we_serve {
	color: #fff;
	text-align: center;
	position: relative;
	font-size: 20px;
	padding: 12px 10px;
	text-transform: uppercase;
	font-weight: bold;
	line-height: 21px;
	margin-top: 7px;
}
.area_we_serve::before, .area_we_serve::after {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
    transition: all 0.3s ease;
}

.area_we_serve::before {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(to right, #757575, #f5f5f5, #757575) 1;
    border-image-slice: 1;
}

.area_we_serve::after {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    border-image: linear-gradient(to bottom, #757575, #f5f5f5, #757575) 1;
    border-image-slice: 1;
}

.area_we_serve:hover::before, .area_we_serve:hover::after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#back-top {
	text-align: center;
	display: flex;
	margin-top: -40px;
	justify-content: center;
}
#back-top a {
  width: 50px;
  height: 37px;
  text-align: center;
  font: 11px/100% Arial, Helvetica, sans-serif;
  text-decoration: none;
  color: #bbb;
  /* transition */
  -webkit-transition: 1s;
  -moz-transition: 1s;
  transition: 1s;
}
#back-top a:hover {
  color: #596b7e;
}
/* arrow icon (span tag) */
#back-top span {
  width:50px;
  height: 37px;
  display: block;
  margin-bottom: 7px;
  background: url(../images/back_to_top.webp) no-repeat center center;

}

/*...........................footer ...................*/
/*...........................common page ...................*/
.main_section {
	padding: 45px 0;
	background: url(../images/main_content_bg.webp) center center no-repeat;
	background-size: cover;
}
.bread_crumbs {
	text-align: center;
	color: #fff;
	margin-top: -50px;
	padding-bottom: 20px;
}
.page_title {
	font-size: 25px;
	text-transform: uppercase;
}
.bread_crumb a {
  color: #ddd;
  text-decoration: none;
}
.bread_crumb i {
	margin: 0 5px;
	font-size: 15px;
}
/*...........................common page ...................*/
/*...........................About Us page ...................*/
.abt_img {
	position: relative;
}
.abt_img img {
	max-width: 100%;
}
.abt_content {
	line-height: 26px;
}
.year_of_exp {
	position: absolute;
	right: 0px;
	bottom: 45px;
	z-index: 99;
	background: #faf8f8;
	border: 1px solid #000;
	border-radius: 10px;
	font-size: 24px;
	padding: 8px 15px;
	display: flex;
	flex-wrap: wrap;
	max-width: 360px;
}
.yr {
	font-size: 48px;
	font-family: "Anton", sans-serif;
}
.yr_text {
	max-width: 75%;
	margin-left: 15px;
	line-height: 29px;
	margin-top: 3px;
}
.why_us {
	padding: 45px 0;
}
.why_us h2 {
	text-align: center;
}
.wh_icon {
	text-align: center;
}
.wh_icon img {
	width: auto !important;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}
.wh_icon img:hover {
    filter: grayscale(100%) brightness(0);
 }
.why_us_slider h3 {
	font-size: 28px;
	font-weight: bold;
	font-family: "PT Serif", serif;
	text-align: center;
}
.why_us_slider h3 a {
	color: #454545;
	transition: color 0.3s ease;
}
.why_us_slider h3 a:hover {
	color: #000;
	text-decoration: none;
}
/*...........................About Us page ...................*/
/*...........................Service page ...................*/
.srv_main_content {
	text-align: center;
}
.srv_thumb_image {
	position: relative;
	overflow: hidden;
	height: 485px;
	background: #000;
}

.soverly {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgba(0, 0, 0, 0.64);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center; /* Center the button */
}

.srv_thumb_image:hover .soverly {
    opacity: 1;
}

.readmore-btn {
    background: url(../images/quote_cta_bg.webp) center center no-repeat;
    background-size: cover;
    color: #fff;
    position: relative;
    padding: 15px 35px;
    text-transform: uppercase;
    display: inline-block;
}
.readmore-btn:hover {
	color: #fff;
	text-decoration: none;
}
.readmore-btn::before, .readmore-btn::after {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
    transition: all 0.3s ease;
}

.readmore-btn::before {
    top: 5px;
    left: 5px;
    width: 96%;
    height: 82%;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(to right, #757575, #f5f5f5, #757575) 1;
    border-image-slice: 1;
}

.readmore-btn::after {
    top: 5px;
    left: 5px;
    width: 96%;
    height: 82%;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    border-image: linear-gradient(to bottom, #757575, #f5f5f5, #757575) 1;
    border-image-slice: 1;
}

.readmore-btn:hover::before, .readmore-btn:hover::after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.srv_info {
	display: flex;
	flex-wrap: wrap;
	background: #fff;
	align-items: center;
}
.service_icon {
	width: 120px;
	height: 95px;
	background: url(../images/service_icon_bg.webp) center center;
	background-size: cover;
	text-align: center;
	margin-right: 15px;
}
.service_icon img {
	max-width: 90px;
	height: auto;
	margin: 0 auto;
	transition: filter 0.3s ease;
}
.service_icon img:hover {
    filter: brightness(0) invert(1);
 }
.srv_info h2 {
	font-size: 26px;
	font-weight: bold;
	font-family: "PT Serif", serif;
	text-align: left;
	width: 65%;
}
.srv_info h2 a {
	color: #454545;
	transition: color 0.3s ease;
}
.srv_info h2 a:hover {
	color: #000;
	text-decoration: none;
}
.our_services .owl-dots.disabled, .our_services .owl-dots {
	display: block !important;
	margin-top: 25px !important;
}
.our_services .owl-dots .owl-dot span {
	width: 15px !important;
	height: 15px !important;
}
/*.................. single services...........*/
.single_srv_content ul {
	margin: 0px;
	padding: 0px;
	margin-bottom: 15px;
}
.single_srv_content ul li {
	position: relative;
	list-style: none;
	padding-left: 25px;
}
.single_srv_content ul li::before {
	position: absolute;
	left: 0px;
	top: 0px;
	content: '\f14a';
	font-family: 'Font Awesome 6 Sharp';
}
.strip_ad_content {
	background: url(../images/strep_content_bg.webp) center center;
	background-size: cover;
	padding: 20px 30px;
	color: #fff;
	margin-top: 15px;
}
.strip_ad_content h3 {
	font-size: 22px;
	font-family: "PT Serif", serif;
	color: #fff;
	margin-bottom: 10px;
}
.con_info_row {
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.phone_nu {
	font-size: 24px;
}
.phone_nu i {
	margin-right: 10px;
}
.con_info_row .default_cta {
	margin-top: -10px;
}
.con_info_row .default_cta a:hover {
	text-decoration: none;
}
.con_info_row .default_cta a i {
	margin-left: 10px;
}
.other_services {
	margin-top: 45px;
}
.other_srv_list {
	text-align: center;
}
.srv_icon {
	max-width: 150px;
	height: auto;
	margin: 0 auto;
}
 
.srv_icon img {
	width: auto !important;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}
.srv_icon img:hover {
    filter: grayscale(100%) brightness(0);
 }
.other_srv_list h2 {
	font-size: 28px;
	font-weight: bold;
	font-family: "PT Serif", serif;
	text-align: center;
}
.other_srv_list h2 a {
	color: #454545;
	transition: color 0.3s ease;
}
.other_srv_list h2 a:hover {
	color: #000;
	text-decoration: none;
}
.other_services .owl-dots.disabled, .other_services .owl-dots {
	display: block !important;
	margin-top: 25px !important;
}
.other_services .owl-dots .owl-dot span {
	width: 15px !important;
	height: 15px !important;
}
.sing_srv_img {
	max-height: 485px;
	overflow: hidden;
}
/*...........................Service page ...................*/
/*...........................Project page ...................*/
.project_list {
	position: relative;
}
.pro_title_info {
	display: flex;
	flex-wrap: wrap;
	background: url(../images/pro_title_info_bg.webp) center center no-repeat;
	background-size: cover;
	justify-content: center;
	align-items: center;
	position: absolute;
	z-index: 9;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 100px;
	transition: height 0.5s ease, background 0.3s ease; /* Smooth transition */
}
.project_list:hover .pro_title_info {
	background: url(../images/pro_title_info_hover_bg.webp) center center no-repeat;
	background-size: cover;
	height: 121px;
}
 

 
.diamond-button {
	position: absolute;
	width: 75px;
	height: 75px;
	background: url(../images/pro_title_info_bg.webp) center center no-repeat;
	background-size: cover;
	transform: rotate(45deg);
	margin: 30px auto;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 20;
	transition: bottom 0.5s ease;
	bottom: 0px;
	opacity: 0;
	left: 43%;
}
.project_list:hover .diamond-button {
bottom: 54px;
	opacity: 1;
}

.diamond-button::before {
	content: "";
	position: absolute;
	top: -10px;
	left: -10px;
	width: 95px;
	height: 95px;
	background: transparent;
	border: 2px solid #fff;
	z-index: -1;
	transform: rotate(0deg);
}

.diamond-button .inner-content {
    transform: rotate(-45deg); /* Counter-rotate the content back to normal */
    font-size: 36px;
    color: #000;
}
.diamond-button .inner-content a {
	color: #000;
}
/* Optional: Hover effect to change color */
.diamond-button:hover {
    background-color: #ddd;
    border-color: #aaa;
}

.diamond-button:hover::before {
    border-color: #aaa;
}
.pro_title_info h2 {
	font-size: 26px;
	font-weight: bold;
	font-family: "PT Serif", serif;
	text-align: center;
}
.project_list:hover .pro_title_info {
	align-items: end;
}
.pro_title_info h2 a {
	color: #000;
	transition: color 0.3s ease;
}
.pro_title_info h2 a:hover {
	color: #000;
	text-decoration: none;
}
.project_list:hover .pro_title_info h2 a {
	color: #fff;
}
/*............ single project...................*/
.single_pro_content {
	text-align: center;
}
.single_pro_content h1 {
	text-align: center;
}
.single_project_list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.single_project_list .p_item {
	max-width: 20%;
	margin: 2px;
	overflow: hidden;
	position: relative;
	background: #000;
	
}
.single_project_list .p_item img {
	height: 300px;
	width: auto;
	display: block;
	margin: 0 auto;
	 opacity: 1 !important;
    transition: opacity 0.3s ease;
}
.single_project_list .p_item img:hover {
	opacity: 0.7 !important;
}
.single_project_list .p_item .uk-button {
	padding: 0px;
}
.single_project_list .p_item:hover::before, 
.single_project_list .p_item:hover::after {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
    transition: all 0.3s ease;
}
.single_project_list .p_item:hover::before {
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(to right, #757575, #f5f5f5, #757575) 1;
    border-image-slice: 1;
}
.single_project_list .p_item:hover::after {
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    border-image: linear-gradient(to bottom, #757575, #f5f5f5, #757575) 1;
    border-image-slice: 1;
}
.single_project_list .p_item a:hover .zoon_icon {
    display: block; 
}
/*...........................Project page ...................*/
/*...........................contact us page ...................*/
.contact_block {
	background: url(../images/contact_info_block_bg.webp) center center;
	background-size: cover;
	padding: 30px 15px;
	margin-bottom: 30px;
	text-align: center;
	color: #fff;
	font-size: 18px;
}
.contact_block .c_icon {
	font-size: 50px;
	color: #fff;
}

.contact_form {
	padding: 45px;
}
.contact_form {
    position: relative;
}
.contact_form h1 {
	text-align: center;
}
.contact_form::before, .contact_form::after {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
    transition: all 0.3s ease;
}
.contact_form::before {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(to right, #757575, #ababab, #757575) 1;
    border-image-slice: 1;
}
.contact_form::after {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    border-image: linear-gradient(to bottom, #757575, #ababab, #757575) 1;
    border-image-slice: 1;
}
.contact_form:hover::before, .contact_form:hover::after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.contact_form .wpforms-container input[type="text"],
.contact_form div.wpforms-container-full input[type="email"],
.contact_form .wpforms-container input[type="tel"],
.contact_form div.wpforms-container-full input[type="number"] {
 background: url(../images/form_field_bg.webp) center center;
 background-size: cover;
 color: #fff !important;
 border:1px solid #000;
 caret-color: #fff;
}
.contact_form .wpforms-container textarea {
     background: url(../images/testarea_bg.webp) center center;
 background-size: cover;
 color: #fff !important;
 border:1px solid #000;
 caret-color: #fff;
}
.career_form .wpforms-container textarea {
    height: 111px !important;
}


.contact_form div.wpforms-container-full .wpforms-field-file-upload .wpforms-uploader {
 background: url(../images/testarea_bg.webp) center center;
 background-size: cover;
 color: #fff !important;
}
.contact_form div.wpforms-container-full .wpforms-field-file-upload .wpforms-uploader .dz-message {
   color: #fff; 
}
.contact_form .wpforms-container input[type="text"]::placeholder,
.contact_form .wpforms-container textarea::placeholder,
.contact_form .wpforms-container input[type="email"]::placeholder,
.contact_form .wpforms-container input[type="tel"]::placeholder {
    color: #fff;
    opacity: 1;
}
div.wpforms-container-full button[type="submit"] {
    background: url(../images/quote_cta_bg.webp) center center no-repeat;
    background-size: cover;
    color: #fff;
    position: relative;
    padding: 15px 35px;
    text-transform: uppercase;
    height: auto;
}
div.wpforms-container-full button[type="submit"]:hover {
    background: #000 !important;
}
div.wpforms-container-full button[type="submit"]::before,
div.wpforms-container-full button[type="submit"]::after {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
    transition: all 0.3s ease;
}
div.wpforms-container-full button[type="submit"]::before {
    top: 5px;
    left: 5px;
    width: 95%;
    height: 81%;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(to right, #757575, #f5f5f5, #757575) 1;
    border-image-slice: 1;
}
div.wpforms-container-full button[type="submit"]::after {
    top: 5px;
    left: 5px;
    width: 95%;
    height: 81%;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-image: linear-gradient(to bottom, #757575, #f5f5f5, #757575) 1;
    border-image-slice: 1;
}
div.wpforms-container-full button[type="submit"]:hover::before, 
div.wpforms-container-full button[type="submit"]:hover::after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.google_map iframe {
	width: 100%;
	height: 606px;
}
/*...........................contact us page ...................*/
/*...........................FAQ's page ...................*/
.faqs_content {
	text-align: center;
}
.faqs .content {
	height: 475px;
}
.faqs .accordion-item {
	border: none;
	background: no-repeat;
	margin-bottom: 15px;
}
.faqs .accordion-button {
 background: url(../images/faqs_header_bg.webp) center center no-repeat;
 background-size: cover;
 color: #fff;
 font-weight: bold;
}
.faqs .accordion-button::after {
	display: none;
}
.faqs .accordion-button .fa-plus {
    display: inline-block; /* Initially show the plus icon */
}

.faqs .accordion-button .fa-minus {
    display: none; /* Hide the minus icon initially */
}

/* When the accordion is expanded */
.faqs .accordion-button:not(.collapsed) .fa-plus {
    display: none; /* Hide the plus icon */
}

.faqs .accordion-button:not(.collapsed) .fa-minus {
    display: inline-block; /* Show the minus icon */
}
.faqs_form {
	padding: 30px;
	padding-bottom: 15px;
}
.faqs_form h2 {
	text-align: center;
	font-size: 28px;
}
.faqs_form .wpforms-container .wpforms-submit-container {
	text-align: center;
}
/*...........................FAQ's page ...................*/

/*...........................Thank You page ...................*/
.thank_u_main
{
	text-align: center;
	padding: 40% 0 !important;
}
.thank_u_main img
{
	margin-bottom: 20px;
}
.thank_u_main p
{
	font-size: 18px;
}
.tq_cta a {
	color: #0f0d0d;
	text-transform: uppercase;
	background: none;
	font-weight: 400;
	font-size: 18px;
}
/*...........................Thank You page ...................*/

/*...........................Error page ...................*/
.error-404
{
	text-align: center;
	padding: 40% 0 !important;
}
.error-404 img{
	margin-bottom: 20px;
}
.error-404 p{
	font-weight: 400;
	font-size: 24px;
	margin-bottom: 20px;
}
.error-404 form
{
	background-image: url(../images/footer_bg.webp);
	background-repeat: no-repeat;
	background-position: center;
	background-size: auto;
	display: inline-block;
}
.error-404 .form-control, .error-404 .form-control:focus {
	display: inline-block;
	width: 300px;
	color: #fff;
	background-color: transparent;
	box-shadow: 0 0 0 0;
	border: 0;
}
.error-404 .form-control::placeholder
{
	color: #fff;
}
.btn-outline-success, .btn-outline-success:focus {
	color: #fff;
	box-shadow: 0 0 0 0;
	border: 0;
}
.btn-outline-success:hover {
	background: none;
}

/*...........................Error page ...................*/

/*........... Reviews page .........*/
.review_pg .default_cta
{
    margin: 10px 0 10px 0;
}


@media only screen and (min-width:992px) and (max-width:1024px) {
 .header .container-fluid {max-width: 98%;}
.top_phone {margin-left: -60px;}
.logo {margin-top: -6px;}
.logo img {max-width: 110px;height: auto;margin-top: -15px;}
.main_menu {padding: 17px 0;}
.main_menu #mega-menu-wrap-main_nav #mega-menu-main_nav > li.mega-menu-item > a.mega-menu-link {
	padding: 0px 12px 0px 12px;font-size: 15px;}
.quote_cta {margin-top: 10px;text-align: right;margin-left: -60px;}
.quote_cta a {padding: 9px 12px;font-size: 15px;}
.strip_detail {font-size: 22px;}
.c_dtails {font-size: 16px;}
.c_dtails p span {font-size: 18px;}
.f_block::after {display: none;}
.fc_icon {width: 38px;height: 38px; font-size: 20px;}
.fc_icon::before, .fc_icon::after {width: 100%;height: 100%;}
.email_block {margin-left: -60px;}
.c_dtails.email p span {font-size: 16px;}
.address_block {padding-left: 15px;}
.area_we_serve {font-size: 15px;padding: 7px 8px;font-weight: 500;line-height: 19px;}
/*............ inner pages .........*/
.bread_crumbs {margin-top: -15px;}
.why_us_slider h3 {font-size: 24px;}
.contact_form {padding: 30px;}
.google_map iframe {height: 575px;}
.contact_block {font-size: 15px;}
.con_info_row .default_cta {margin-top: 10px;}

}
@media only screen and (min-width:1025px) and (max-width:1199px) {
 .header .container-fluid {max-width: 98%;}
 .logo {margin-top: -6px;}
.top_phone {margin-left: -60px;}
.logo img {max-width: 110px;height: auto;margin-top: -15px;}
.main_menu {padding: 17px 0;}
.main_menu #mega-menu-wrap-main_nav #mega-menu-main_nav > li.mega-menu-item > a.mega-menu-link {
	padding: 0px 12px 0px 12px;font-size: 15px;}
.quote_cta {margin-top: 10px;text-align: right;margin-left: -60px;}
.quote_cta a {padding: 9px 12px;font-size: 15px;}
.strip_detail {font-size: 22px;}
.c_dtails {font-size: 16px;}
.c_dtails p span {font-size: 18px;}
.f_block::after {display: none;}
.fc_icon {width: 38px;height: 38px; font-size: 20px;}
.fc_icon::before, .fc_icon::after {width: 100%;height: 100%;}
.email_block {margin-left: -60px;}
.c_dtails.email p span {font-size: 16px;}
.address_block {padding-left: 15px;}
.area_we_serve {font-size: 15px;padding: 7px 8px;font-weight: 500;line-height: 19px;}
/*............ inner pages .........*/
.bread_crumbs {margin-top: -15px;}
.why_us_slider h3 {font-size: 24px;}
.contact_form {padding: 30px;}
.google_map iframe {height: 575px;}
.contact_block {font-size: 15px;}
.con_info_row .default_cta {margin-top: 10px;}

}
@media only screen and (min-width:1200px) and (max-width:1366px) {
 .header .container-fluid {max-width: 98%;}
.top_phone {margin-left: -60px;}
.main_menu #mega-menu-wrap-main_nav #mega-menu-main_nav > li.mega-menu-item > a.mega-menu-link {
	padding: 5px 16px 5px 16px;
}
.quote_cta {margin-left: -60px;}
.c_dtails {font-size: 16px;}
.c_dtails p span {font-size: 20px;}
.email_block {margin-left: -51px;}
.phone_block::after {right: 45px;}
.area_we_serve {font-size: 16px;}
.owl-carousel .owl-nav button.owl-prev {
	left: 2%;}
.owl-carousel .owl-nav button.owl-next {
	right: 2%;
}
.wh_icon img {height: 115px;}
.why_us_slider h3 {font-size: 24px; }
.con_info_row .default_cta {margin-top: 10px;}
}
@media only screen and (min-width:1367px) and (max-width:1400px) {
.header .container-fluid {max-width: 98%;}
.quote_cta {margin-left: -35px;}
.owl-carousel .owl-nav button.owl-prev {left: 2%;}
.owl-carousel .owl-nav button.owl-next {right: 2%;}
.footer .container,.main_section .container {max-width: 95%;}
.srv_thumb_image {height: 435px;}

}
@media only screen and (min-width:1441px) and (max-width:1500px) {
.header .container-fluid {
	max-width: 98%;
}
.quote_cta {
	margin-top: 15px;
	margin-left: -30px;
}

}
@media only screen and (min-width:1501px) and (max-width:1700px) {
.quote_cta {
	margin-top: 15px;
	margin-left: -40px;
}

}