/* Responsive Topbar Styles */
#topbar {
    background: #161616;
    padding: 0;
    position: fixed;
    left: 0;
    width: 100%;
    height: 55px;
    top: 0px;
    z-index: 101;
    transition: top 0.3s, opacity 0.3s;
}

#topbar.topbar-visible {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

#topbar .container,
#topbar .row {
    display: block;
    height: 100%;
}

#topbar .contact-list {
    display: flex;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

#topbar .contact-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
}

#topbar .contact-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #A2A2A2;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

#topbar .contact-link:hover {
    color: var(--primary-color);
}

#topbar .contact-link i {
    margin-right: 8px;
    font-size: 15px;
}

#topbar .topbar-inner {
    display: flex;
    align-items: center;
    height: 100%;
	padding-top: 12px;
}

/* Large screens (1200px and up) */
@media (min-width: 1200px) {
    #topbar .container {
        max-width: 1170px;
        margin: 0 auto;
    }
}

/* Medium screens (992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    #topbar .container {
        max-width: 960px;
        margin: 0 auto;
    }
    
    #topbar .contact-link {
        font-size: 13px;
    }
}

/* Small screens (768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    #topbar .container {
        max-width: 720px;
        margin: 0 auto;
    }
    
    #topbar .contact-link {
        font-size: 12px;
    }
    
    #topbar .contact-link i {
        margin-right: 5px;
    }
}

/* Extra small screens (up to 767px) */
@media (max-width: 767px) {
    #topbar {
        padding: 5px 0;
    }
    
    #topbar .container {
        max-width: 540px;
        margin: 0 auto;
    }
    
    #topbar .contact-list {
        flex-direction: row !important;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 0;
        margin: 0;
        gap: 0 16px;
    }
    #topbar .contact-item {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 8px;
    }
    #topbar .contact-link {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        font-size: 20px;
        padding: 0;
    }
    #topbar .contact-link i {
        font-size: 20px;
        margin: 0;
    }
    #topbar .contact-text {
        display: none !important;
    }
    #topbar {
        height: 55px !important;
        overflow: visible !important;
    }
}

/* Extra extra small screens (up to 480px) */
@media (max-width: 480px) {
    #topbar {
        padding: 3px 0;
    }
    
    #topbar .contact-link {
        font-size: 11px;
    }
    
    #topbar .contact-link i {
        font-size: 13px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
	.parallax {
		width: 150%;
	}
	
	/* Add stable header positioning */
	/* header.construct.header-curvy {
		position: relative;
		transform: none !important;
		transition: none !important;
	} */
	
	header.construct.header-curvy .mainmenu-container {
		position: relative;
		transform: none !important;
		transition: none !important;
	}
	
	header.construct.header-curvy .logo {
		position: relative;
		transform: none !important;
		transition: none !important;
	}
}

/* Modify the header fixed styles */
header.construct.header-curvy.header-fixed {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	transform: none !important;
	transition: none !important;
}

/* Remove conflicting transitions */
header.construct.header-curvy .mainmenu-container ul {
	transition: none !important;
}

header.construct.header-curvy .mainmenu-container ul > li > ul {
	transition: none !important;
	opacity: 1;
	visibility: visible;
}

/* Ensure logo stays stable */
header.construct.header-curvy .logo {
	position: relative;
	transform: none !important;
	transition: none !important;
}

/* Prevent unwanted transforms during animations */
.construct-banner-caption,
.service-tab-content,
#service-we-provide .service-tab-content,
#welcome-to-construct,
#testimonials-construct-home {
	transform: none !important;
	transition: none !important;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	header.construct.header-curvy .logo:before{
		right: 30px;
		transition: none !important;

	}
	
	.banner .banner-form {
		width: 270px !important;
	}
	.banner .banner-form .tab-title {
		margin-left: -13px;
		margin-right: -13px;
	}
	.banner .banner-form .tab-title div {
		padding: 0 13px;
	}
	.col-lg-6.col-md-12.large-box {
		margin-bottom: 25px;
	}
	#who-we-are .large-box .col-lg-6 img {
		height: 350px;
	}
	#who-we-are .single-box img {
		width: 100%;
	}
	#who-we-are .large-box .col-lg-6:last-child {
		padding: 92px 30px;
	}
	#our-projects .masonary-item {
		height: auto;
		margin-bottom: 25px;
	}
	#our-projects .masonary-item.height-1 {
		height: auto;
	}
	#testimonials .single-testimonial .profile-info {
		padding: 15px 15px 15px 15px;
		width: 100%;
	}
	#testimonials .single-testimonial .profile-info img {
		position: relative;
		bottom: 30px;
		display: block;
		margin: auto;
	}
	#testimonials .single-testimonial .content {
		width: 100%;
		padding-bottom: 20px;
	}
	footer .widget img.positioned {
		margin-top: 50px;
	}
	.mainmenu-container {
		margin-top: 30px;
	}
	header .mainmenu-container ul {
		text-align: center;
	}
	.service-tab-content .col-lg-4 img {
	  max-width: none;
	  width: 249px;
	  position: relative;
	  bottom: 2px;
	}
	#service-content .col-lg-8 button {
		margin-bottom: 10px;
	}
	#project-version-one .single-project-item .img-wrap img {
		width: 100%;
	}
	.faq .faq-content .faq-search input[type="text"] {
		width: 72%;
	}
	#blog-post .sidebar-widget .popular-post li img {
		width: 100px;
	}
	.testimonials_v1 .testimonials_v1_content .single_client .single_client_right::before {

	  left: 3px;
	  width: 100%;
	}
	.testimonials_v1 #testimonials.testimonials_v1_content .single-testimoinal-wrap .single-testimonial .profile-info {
	  padding: 15px;
	  width: auto;
	}
	.testimonials_v1 #testimonials.testimonials_v1_content .single-testimoinal-wrap .single-testimonial .content {
	  width: 75%;
	}
	.testimonials_v2 .testimonials_v2_content .single_client .single_client_right::before {

	  left: 3px;
	  width: 100%;
	}
	.testimonials_v2 #testimonials.testimonials_v2_content .single-testimoinal-wrap .single-testimonial .profile-info {
	  padding: 15px;
	  width: auto;
	}
	.testimonials_v2 #testimonials.testimonials_v2_content .single-testimoinal-wrap .single-testimonial .content {
	  margin-bottom: 0;
	  width: 66%;
	}

	#project-version-two.home-v2 .gallery-filter li span {
		margin: 10px 0;
	}
	#our-achivement .achivement ul li span {
		border: none;
		border-bottom: 1px dashed #fff;
		padding-bottom: 10px;
		margin-bottom: 20px;
	}
	#our-achivement .achivement ul li span:last-child {
		border: none;
	}
	#why-choose-us .col-lg-3 {
		margin-bottom: 45px;
	}
	.home-v2 .blog-wrap img {
		max-height: 185px;
	}
	.home-v2 .blog-wrap.height-big img {
		max-height: 400px;
	}
	#subscribe-section .subscribe-form-wrap input {
		width: 60%;
	}
	.parallax {
		width: 150%;
	}
	header.header-v1 .mainmenu-container {
		margin-top: 0;
	}
	header.header-v1.header-fixed .mainmenu-container > ul > li {
		line-height: 65px;
	}
	header.header-v3 .mainmenu-container {
		margin-top: 0;
	}
	header.header-v4 .mainmenu-container {
		margin-top: 0;
	}
	#project-version-one .normal-gallery.gallery-v5 .single-project-item .col-lg-4 {
		padding-bottom: 11px;
		padding-top: 0;
	}
	#project-version-one .normal-gallery.gallery-v5 .single-project-item p {
		margin: 11px 0;
	}
	.single-shop-item {
		text-align: center;
	}
	.product-details-box .img-holder {
		margin-bottom: 30px;
	}
	#promotional-text p {
		font-size: 29px;
	}
	.service-tab-content p br {
		display: none;
	}
	#service-we-provide .service-tab-content ul {
		margin-top: 15px;
	}
	#service-we-provide .service-tab-content ul li {
		margin-left: -15px;
	}
	.service-tab-content .col-lg-4 {
		right: 70px;
	}
	.service-tab-content .col-lg-4 img {
		width: auto;
	}
	#our-projects.with-filter .gallery-filter li span {
		margin-bottom: 15px;
	}
	#blog .content-wrap {
		padding-top: 48px;
	}
	#blog.home-v2 .blog-wrap.height-big .content-wrap p {
		margin-bottom: 52px;
	}
	#our-mission .img-holder img {
		width: 100%;
	}
	#blog-post .sidebar-widget .popular-post li img {
		margin-right: 20px;
	}
	#blog-post article .administrator .administrator_text {
	  margin-left: 0;
	}
	#service-content .img-holder img {
		width: 100%;
	}
	#featured-service .img-holder img {
		width: 100%;
	}
	.testimonials_v1 #testimonials.testimonials_v1_content .single-testimoinal-wrap .single-testimonial .content {
	  width: 73%;
	}
	#blog-post.testimonials_v1 .sidebar-widget {
		margin-bottom: 30px;
		padding-left: 48px;
	}
	.single-construction-welcome .img-holder img {
	  width: 100%;
	}
	#service-we-provide .service-tab-content ul {
	  margin-top: 0;
	}
	#service-we-provide .service-tab-content ul li {
	  margin-left: 0;
	}
	.service-tab-content ul li {
	  font-size: 12px;
	  margin-left: 15px;
	}
	#project-version-one.construct.home .gallery-filter {
		margin-bottom: 10px;
	}
	#project-version-one.construct.home .gallery-filter li span {
	  margin-bottom: 20px;
	}
	#video-section-construction .video-text p {
	  margin: 0 0 20px;
	}
	#video-section-construction .video-text h2 {
	  margin: 0 0 10px;
	}
	.service-tab-content p {
	  margin-bottom: 20px;
	}
	.single-construction-welcome h1 {
	  font-size: 33px;
	}
	#welcome-to-construct .col-lg-7 ul {
	  width: 50%;
	}
	#welcome-to-construct .col-lg-7 {
	  padding: 35px 50px;
	}
	#testimonials-construct-home .single-testimonial-construct .col-lg-8 {
	  padding: 0px 20px 0 30px;
	}
	#testimonials-construct-home .single-testimonial-construct h3 {
	  margin: 15px 0 13px;
	  right: 42px;
	}
	#blog-construct .single-blog-post .img-holder img {
	  width: 100%;
	}
	header.construct.header-curvy .mainmenu-container ul {display: inline-block !important;}
	header.construct.header-curvy .logo {float: none !important;width: 100%;text-align: center;}
	header.construct.header-curvy.header-fixed .logo {display: none !important;}
	header.construct.header-curvy .mainmenu-container {float: none !important;width: 100%;text-align: center;}
	header.construct.header-curvy .mainmenu-container ul {float: none !important;display: inline-block;}
	header.construct.header-curvy.header-fixed .mainmenu-container {margin-top: 0;}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.container {
		padding: 0 15px;
	}
	button.navigation-toggler {
		display: block;
	}
	.banner .banner-form {
		display: none;
	}
	#promotional-text p {
		line-height: 45px;
		padding: 15px 0;
	}
	#who-we-are .large-box {
		margin-bottom: 20px;
	}
	#who-we-are .large-box .col-lg-6 img {
		height: 258px;
	}
	#who-we-are .single-box img {
		width: 100%;
	}
	.service-tab-title ul {
		margin-bottom: 25px;
	}
	.service-tab-title ul li {
		float: left;
		width: 230px;
	}
	.service-tab-title ul li:first-child {
		border: none;
	}
	#our-projects .masonary-item {
		width: 50%;
		height: auto;
	}
	#our-projects .masonary-item.width-1 {
		width: 50%;
	}
	#our-projects .masonary-item.height-1 {
		height: auto;
	}
	#our-projects .masonary-item.width-2 {
		width: 50%;
		height: auto;
	}
	#testimonials .col-lg-4 {
		margin-bottom: 45px;
	}
	#testimonials .single-testimonial .profile-info {
		padding: 15px 15px 15px 15px;
		width: 100%;
	}
	#testimonials .single-testimonial .profile-info img {
		position: relative;
		bottom: 30px;
		display: block;
		margin: auto;
	}
	#testimonials .single-testimonial .content {
		width: 100%;
		padding-bottom: 20px;
	}
	footer .footer-menu ul li a {
		padding: 0 20px;
	}
	header nav.mainmenu ul {
		text-align: center;
	}
	header nav.mainmenu ul.navigation {
		background: #012C3C;
		margin-top: 10px;
		float: none !important;
		display: none;
	}
	header nav.mainmenu ul li {
		display: block;
	}
	header nav.mainmenu ul li a {
		color: #fff;
	}
	.mainmenu.pull-right {
		float: right !important;
		width: 60%;
	}
	button.navigation-toggler {
		margin: 0 auto;
	}
	#image-gallery-isotope .masonary-item {
		width: 50%;
		height: auto;
	}
	#image-gallery-isotope .masonary-item.width-1 {
		width: 50%;
	}
	#image-gallery-isotope .masonary-item.height-1 {
		height: auto;
	}
	#image-gallery-isotope .masonary-item.width-2 {
		width: 50%;
		height: auto;
	}
	
	#our-specialist .single-member {
		margin-bottom: 35px;
	}
	#our-mission .col-lg-7 .col-xs-6 {
		margin-bottom: 30px;
	}
	#service-content .col-lg-8 button {
		margin-bottom: 10px;
	}
	.faq .faq-content .faq-search input[type="text"] {
		width: 55%;
	}
	.testimonials_v1 .testimonials_v1_content .single_client .single_client_right::before {

	  left: 3px;
	  width: 100%;
	}
	.testimonials_v1 #testimonials.testimonials_v1_content .single-testimoinal-wrap .single-testimonial .content {
		width: 100%;
	}
	.testimonials_v2 .testimonials_v2_content .single_client .single_client_right::before {

	  left: 3px;
	  width: 100%;
	}
	.testimonials_v2 #testimonials.testimonials_v2_content .single-testimoinal-wrap .single-testimonial .content {
		width: 100%;
	}
	.parallax {
		width: 250%;
	}
	#why-choose-us .col-lg-3 {
		margin-bottom: 45px;
	}
	#our-achivement .achivement {
		margin: 15px 0;
	}
	#project-version-two.home-v2 .gallery-filter li span {
		margin: 15px 0;
	}
	#request-a-qoute-container .tab-content form ul li {
		padding: 0 20px;
		width: 50%;
		margin: 15px 0;
	}
	#request-a-qoute-container {
		margin-top: -55px;
	}
	.home-v2 .mainmenu-container ul.mainmenu li a:hover, 
	.home-v2 .mainmenu-container ul.mainmenu li.current a {
	    background: #012C3C;
	}
	#page-title .title {
		display: block;
		float: none !important;
		margin: auto;
		text-align: center;
	}
	#page-title .page-breadcumb {
		float: none !important;
		margin-top: 30px;
		position: static;
		text-align: center;
	}
	header.header-v1 .mainmenu-container ul li {
		line-height: 40px;
	}
	header.header-v1 .mainmenu-toggler {
		color: #fff;
	}
	header.header-v1.header-fixed .mainmenu-container ul li {
		line-height: 35px;
	}
	header.header-v1.header-fixed .mainmenu-container {
		padding-top: 0;
	}
	header.header-v3 .logo {
		margin-bottom: 30px;
	}
	header.header-v3.header-fixed .mainmenu-container {
		padding-top: 0;
	}
	header.header-v3.header-fixed .header-v3-top .col-lg-9 {
		display: none;
	}
	header.header-v3.header-fixed .header-v3-top .logo {
		margin-bottom: 0;
	}
	header.header-v3.header-fixed .mainmenu-container ul.top-icons-wrap {
		margin-bottom: 0;
	}
	header.header-v3 button.mainmenu-toggler {
		margin-top: 9px;
	}
	header.header-v3 .mainmenu-container ul li.top-icons {
		margin-top: 5px;

	}
	header.header-v3 .mainmenu-container ul li.top-icons a i {
		color: #FE5454;
	}
	header.header-v3 .mainmenu-container ul li.top-icons a:hover i {
		color: #fff;
	}
	header.header-v4 .logo {
		margin-bottom: 20px;
	}
	header.header-v4 .mainmenu-container ul.top-icons-wrap li {
		float: left;
	}
	header.header-v4 .mainmenu-container ul.top-icons-wrap {
		margin-bottom: 0;
		margin-right: 10px;
	}
	header.header-v4 .mainmenu-container ul.mainmenu {
		border-radius: 0;
		padding: 0;
	}
	header.header-v4 button.mainmenu-toggler {
		margin-top: 4px;
	}
	header.header-v4.header-fixed .mainmenu-container {
		padding-top: 0;
	}
	.header-v4-bottom .top-icons-wrap form {
		top: 4px;
	}
	#project-version-one .normal-gallery.gallery-v5 .single-project-item .col-lg-8 {
		padding: 0;
	}
	#project-version-one .normal-gallery.gallery-v5 .single-project-item .col-lg-8 img {
		width: 100%;
	}
	#page-404-content .container .row {
		text-align: center;
	}
	#page-404-content .container .row .col-lg-7 {
		text-align: left;
	}
	#page-404-content .container .row > img {
		position: static;
		margin-top: -200px;
		margin-bottom: 20px;
	}
	#page-404-content .container .row {
		margin: 0;
	}
	.single-shop-item {
		text-align: center;
	}
	.product-details-box .img-holder {
		margin-bottom: 30px;
		text-align: center;
	}
	#blog-post .sidebar-widget .popular-post li .content-wrap {
		width: 49%;
	}
	#who-we-are .large-box .col-lg-6:last-child {
		padding: 32px 30px;
	}
	.service-tab-content ul li {
		line-height: 31px;
	}
	.service-tab-content p br {
		display: none;
	}
	#service-we-provide .container > .row {
		margin: 0;
	}
	#bottom-bar .row {
		margin: 0;
	}
	footer .container .row {
		margin: 0;
	}
	#our-projects.with-filter .gallery-filter li span {
		margin-bottom: 15px;
	}	
	#featured .container {
		overflow: hidden;
	}
	#featured .container .row {
		margin: 0;
	}
	#blog-post .blog-content {
		margin-bottom: 35px;
	}
	#service-content .img-holder img {
		width: 100%;
	}
	#featured-service .img-holder img {
		width: 100%;
	}
	#featured-service .col-lg-3 {
		text-align: center;
		margin-bottom: 30px;
	}
	.testimonials_v1 #testimonials.testimonials_v1_content .single-testimoinal-wrap {
	  padding: 0 15px;
	}
	#blog-post.testimonials_v1 .sidebar-widget {
	  padding-left: 35px;
	}
	#construction-welcome {
	  margin-bottom: -30px;
	}
	.single-construction-welcome {
		margin-bottom: 30px;
	}
	.single-construction-welcome .img-holder img {
	  width: 100%;
	}
	#service-we-provide.construct .service-tab-content .col-lg-4 {
	  bottom: -80px;
	}
	#project-version-one.construct.home .gallery-filter {
		margin-bottom: 10px;
	}
	#project-version-one.construct.home .gallery-filter li span {
	  margin-bottom: 20px;
	}
	#video-section-construction .video-preview {
		margin-bottom: 30px;
	}
	#welcome-to-construct .col-lg-5 .img-holder img {
	  width: 100%;
	}
	#testimonials-construct-home .single-testimonial-construct  {
	  text-align: center;
	}
	#testimonials-construct-home .single-testimonial-construct h3 {
	  position: static;
	}
	#testimonials-construct-home .single-testimonial-construct .col-lg-8 {
	  padding: 30px 25px;
	}
	#our-team-construct {
		margin-bottom: -30px;
	}
	#our-team-construct .single-construct-member {
		height: unset !important;
		min-height: unset !important;
		max-height: unset !important;
		margin-bottom: 30px;
	}
	#blog-construct .single-blog-post .img-holder img {
	  width: 100%;
	}
	#blog-construct .single-blog-post ul li a, #blog-construct .single-blog-post ul li span {
	  font-size: 12px;
	}
	footer.construct .widget {
		margin-bottom: 30px;
	}
	.clearboth-tab {
		clear: both;
	}
	#clients.construct .container {
	    margin: 0;
	}
	#project-version-one .gallery-v4 .single-project-item {
	    width: 50%;
	    float: left;
	    margin-bottom: 0;
	}
	#project-version-one .gallery-v4 .single-project-item img {
		width: 100%;
	}

	button.mainmenu-toggler {
		display: block;
	}
	header .mainmenu-container ul li {
		line-height: 40px;
		display: block;
	}
	header .mainmenu-container ul.top-icons-wrap {
		margin-bottom: 30px;
	}
	header .mainmenu-container ul li.top-icons {
		display: inline-block;
	}
	header .mainmenu-container ul.mainmenu {
		float: none !important;
		display: none;
		text-align: center;
		clear: both;
		width: 100%;
		margin: auto;
		background: transparent;
		border-radius: 16px;
		transition: none !important;
	}
	header .mainmenu-container ul.mainmenu ul {
		position: static;
		opacity: 1;
		visibility: visible;
		border: none;
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	header .mainmenu-container ul.mainmenu li a {
		background: transparent none repeat scroll 0 0;
		border-bottom: 1px solid #2A2A2A;
		color: #767474;
		display: block;
		font-size: 14px;
		font-weight: 400;
		line-height: 35px;
		padding: 0 20px;
		text-align: center;
		text-transform: capitalize;
		transition: all 0.3s ease 0s;
	}
	header nav.mainmenu-container ul > li > ul > li > a::after {
		display: none;
	}
	header .mainmenu-container ul.mainmenu li a:hover,
	header .mainmenu-container ul.mainmenu li.current > a {
		color: #fff !important;
		background: var(--primary-color);
		padding: 0 30px;
	}
	header .mainmenu-container ul.mainmenu li.current > a {
		padding: 0 20px;
	}
	header .mainmenu-container ul.mainmenu li ul.submenu {
		display: none;
	}
	header .mainmenu-container ul.mainmenu li:last-child a {
		border-bottom: 1px solid #2A2A2A;
	}
	header .mainmenu-container ul.mainmenu li a:before {
		content: '';
		display: none;
	}
	header .mainmenu-container ul.mainmenu ul {
		width: 100%;
	}
	.mainmenu-container ul li.dropdown:after {
		display: none !important;
	}
	.mainmenu-container ul li.dropdown .fa {
		position: absolute;
		right: 7px;
		top: 5px;
		width: 35px;
		height: 25px;
		display: block;
		color: #FFF;
		line-height: 22px;
		font-size: 18px;
		text-align: center;
		z-index: 5;
		cursor: pointer;
		border: 1px solid #fff;
		border-radius: 5px;
	}
	.mainmenu-container ul li.dropdown .fa:hover {
		background: var(--primary-color);
		color: #fff;
	}

	/* Enhanced mobile menu for 768px-991px */
	.mainmenu {
		display: none !important;
		flex-direction: column !important;
		align-items: stretch !important;
		width: 85vw !important;
		max-width: 400px !important;
		background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
		box-shadow: -8px 0 32px rgba(0,0,0,0.3) !important;
		z-index: 10002 !important;
		text-align: center !important;
		position: fixed !important;
		top: 0 !important;
		right: -100vw !important;
		height: 100vh !important;
		border-radius: 0 0 16px 0 !important;
		padding: 0 !important;
		margin-top: 90px !important;
		transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
					opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
					transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
		opacity: 0 !important;
		pointer-events: none !important;
		transform: translateX(20px) !important;
		backdrop-filter: blur(10px) !important;
		-webkit-backdrop-filter: blur(10px) !important;
	}
	
	.mainmenu.active {
		display: flex !important;
		right: 0 !important;
		box-shadow: -12px 0 40px rgba(0,0,0,0.4) !important;
		opacity: 1 !important;
		pointer-events: auto !important;
		transform: translateX(0) !important;
	}
	
	.mainmenu li a {
		color: #fff !important;
		padding: 20px 32px !important;
		font-size: 16px !important;
		font-family: 'Roboto', 'Arial', sans-serif !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		word-break: break-word !important;
		border-radius: 0 !important;
		transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
		font-weight: 500 !important;
		letter-spacing: 0.02em !important;
		position: relative !important;
		background: transparent !important;
		text-decoration: none !important;
		text-align: center !important;
		border-bottom: 1px solid rgba(255,255,255,0.08) !important;
	}

	.construct.header-curvy .logo {text-align: left;width: 62%;}
	.construct.header-curvy .logo,
	.construct.header-curvy .mainmenu-container {float: none !important;}
	header .mainmenu-container ul.top-icons-wrap {margin-bottom: 0;}
	header.construct.header-curvy.header-fixed {position: static;}
	header.construct.header-curvy.header-fixed .logo {display: none;}
	header.construct.header-curvy.header-fixed button.mainmenu-toggler {margin-top: 20px;}
	header.construct.header-curvy .mainmenu-container {margin-top: -100px;}
	header.construct.header-curvy .mainmenu-container ul > li > ul {transition: none !important;opacity: 1;visibility: visible;}
	header.construct.header-curvy .mainmenu-container ul > li:hover > ul {display: none;opacity: 1;visibility: visible;}
	header.construct.header-curvy .mainmenu-container ul {transition: none !important;}
	.service-tab-title ul li {width: 50%;}
	#video-section-construction .video-preview, #video-section-construction .video-text {display: block;width: 100%;padding: 0;}

	#topbar.construct .pull-left,
	#topbar.construct .pull-right {float: none !important;text-align: center; }
	#topbar .contact-info ul li a {margin-right: 35px;}

}

@media only screen and (min-width: 480px) and (max-width: 767px) {
	/* Enhanced mobile menu for 480px-767px */
	.mainmenu {
		display: none !important;
		flex-direction: column !important;
		align-items: stretch !important;
		width: 85vw !important;
		max-width: 400px !important;
		background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
		box-shadow: -8px 0 32px rgba(0,0,0,0.3) !important;
		z-index: 10002 !important;
		text-align: center !important;
		position: fixed !important;
		top: 0 !important;
		right: -100vw !important;
		height: 100vh !important;
		border-radius: 0 0 16px 0 !important;
		padding: 0 !important;
		margin-top: 90px !important;
		transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
					opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
					transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
		opacity: 0 !important;
		pointer-events: none !important;
		transform: translateX(20px) !important;
		backdrop-filter: blur(10px) !important;
		-webkit-backdrop-filter: blur(10px) !important;
	}
	
	.mainmenu.active {
		display: flex !important;
		right: 0 !important;
		box-shadow: -12px 0 40px rgba(0,0,0,0.4) !important;
		opacity: 1 !important;
		pointer-events: auto !important;
		transform: translateX(0) !important;
	}
	
	.mainmenu li {
		display: block !important;
		margin: 0 !important;
		border-bottom: 1px solid rgba(255,255,255,0.08) !important;
		width: 100% !important;
		position: relative !important;
		overflow: hidden !important;
	}
	
	.mainmenu li:last-child {
		border-bottom: none !important;
	}
	
	.mainmenu li:first-child {
		border-top: 1px solid rgba(255,255,255,0.08) !important;
	}
	
	.mainmenu li a {
		color: #fff !important;
		padding: 20px 32px !important;
		font-size: 16px !important;
		font-family: 'Roboto', 'Arial', sans-serif !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		word-break: break-word !important;
		border-radius: 0 !important;
		transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
		font-weight: 500 !important;
		letter-spacing: 0.02em !important;
		position: relative !important;
		background: transparent !important;
		text-decoration: none !important;
		text-align: center !important;
	}
	
	.mainmenu li a::before {
		content: '' !important;
		position: absolute !important;
		left: 0 !important;
		top: 0 !important;
		width: 4px !important;
		height: 100% !important;
		background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-dark) 100%) !important;
		transform: scaleY(0) !important;
		transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
	}
	
	.mainmenu li a:hover,
	.mainmenu li.active > a {
		background: rgba(255,255,255,0.05) !important;
		color: var(--primary-color-light) !important;
		padding-left: 36px !important;
		transform: translateX(4px) !important;
	}
	
	.mainmenu li a:hover::before,
	.mainmenu li.active > a::before {
		transform: scaleY(1) !important;
	}
	
	.mainmenu::before {
		content: 'Navigation' !important;
		display: block !important;
		padding: 24px 32px 16px 32px !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		color: rgba(255,255,255,0.6) !important;
		text-transform: uppercase !important;
		letter-spacing: 0.1em !important;
		border-bottom: 1px solid rgba(255,255,255,0.08) !important;
		background: rgba(0,0,0,0.2) !important;
		text-align: center !important;
	}
	
	.mainmenu::after {
		content: '' !important;
		display: block !important;
		flex: 1 !important;
		min-height: 60px !important;
	}

	footer .widget img.positioned {
		margin-top: 10px;
	}
	footer .widget img.positioned {
		margin-top: 0;
		position: relative;
		top: 53px;
	}
	#who-we-are .large-box {
		float: none;
	}
	#who-we-are .large-box .col-lg-6 {
		float: none;
		margin: auto;
		width: 85%;
		display: block;
	}
	#who-we-are .single-box {
	  display: block;
	  width: 85%;
	  float: none;
	  margin: auto;
	  margin-bottom: 40px;
	}
	#who-we-are .single-box:last-child {
		margin-bottom: 0;
	}
	.service-tab-title ul li {
		float: left;
		width: 50%;
	}
	#our-projects .masonary-item {
		width: 100%;
		height: auto;
	}
	#our-projects .masonary-item.width-1 {
		width: 100%;
	}
	#our-projects .masonary-item.height-1 {
		height: auto;
	}
	#our-projects .masonary-item.width-2 {
		width: 100%;
		height: auto;
	}
	#testimonials .col-lg-4 {
	  margin: auto auto 35px;
	  width: 85%;
	  float: none;
	  display: block;
	}
	#testimonials .single-testimonial {
		margin-bottom: 45px;
	}
	#testimonials .single-testimonial .profile-info {
		padding: 15px 0px 15px 15px;
		width: auto;
	}
	#testimonials .single-testimonial .profile-info img {
		position: relative;
		bottom: 30px;
		display: block;
		margin: auto;
	}
	#testimonials .single-testimonial .content {
		width: 63%;
		padding-bottom: 20px;
	}
	#blog .col-lg-6.blog-wrap {
		width: 85%;
		margin: auto;
		margin-bottom: 35px;
		float: none;
		display: block;
	}
	#bottom-bar .container p {
		line-height: 45px;
	}
	footer .container .col-lg-12 button {
		font-size: 20px;
		padding: 0px 45px;
	}
	footer .col-xs-6.widget {
		width: 50%;
		margin: auto;
		margin-bottom: 35px;
	}
	#blog-post .sidebar-widget .popular-post li .content-wrap {
		width: 62%;
	}

	.service-tab-content {
	  width: 85%;
	  display: block;
	  margin: auto;
	}
	#our-mission .col-lg-7 .col-xs-6 {
		width: 50%;
		float: left;
		margin-bottom: 30px;
	}
	#featured-service .col-xs-12 {
		width: 85%;
		float: none;
		margin: auto;
		display: block;
	}
	#featured-service .img-holder {
	  display: block;
	  margin: 23px auto auto;
	  overflow: hidden;
	  position: relative;
	  width: 270px;
	}
	#pricing-content .price-table-wrap .price-table {
		float: none;
		width: 85%;
		margin: auto;
		display: block;
	}
	.testimonials_v1 #testimonials.testimonials_v1_content .single-testimoinal-wrap .single-testimonial .content {
	  width: 69%;
	}
	.testimonials_v2 #testimonials.testimonials_v2_content .single-testimoinal-wrap .single-testimonial .content {
	  width: 69%;
	}
	#blog-post .no-search-content .suggesion-input input[type="text"] {
  		width: 70%;
	}
	#request-a-qoute-container .tab-content form ul li button {
		width: 65%;
		margin: auto;
		display: block;
	}
	header.header-v1 .top-info ul li span {
		display: inline-block;
	}
	.cart-page .add-to-cart-wrap {
		display: block;
		margin: auto;
		text-align: left;
		width: 78%;
	}
	.service-tab-content p br {
		display: none;
	}
	.service-tab-content .col-lg-4 img {
		width: 180px;
	}
	.service-tab-content .col-lg-4 {
		bottom: -87px;
	}
	.testimonials_v1 #testimonials.testimonials_v1_content .single-testimoinal-wrap .single-testimonial .content {
	  width: 64%;
	}
	.clearboth-480 {
		clear: both;
	}
	footer.construct .widget img.positioned {
	  width: 100%;
	}
	#great-construct-team p b {
	  font-size: 27px;
	}
	#blog-construct .single-blog-post,
	#our-team-construct .single-construct-member,
	#testimonials-construct-home .single-testimonial-construct {	
	  width: 85%;
	  float: none;
	  margin-left: auto;
	  margin-right: auto;
	}
	#testimonials-construct-home .single-testimonial-construct {
		display: block;
	}
	#service-we-provide.construct .service-tab-content .col-lg-4 {
	  bottom: -80px;
	}
	#project-version-one .gallery-v4 .single-project-item {
	    width: 50%;
	    float: left;
	    margin-bottom: 0;
	}
}
@media only screen and (min-width: 640px) and (max-width: 767px) {
	footer .widget img.positioned {
	  margin-top: 0;
	  position: relative;
	  top: 0px;
	}
	.testimonials_v1 #testimonials.testimonials_v1_content .single-testimoinal-wrap .single-testimonial .content {
	  width: 77%;
	}
	.testimonials_v2 #testimonials.testimonials_v2_content .single-testimoinal-wrap .single-testimonial .content {
	  width: 77%;
	}
}


/**
* Cart Page Table responsive css Styles.
**/

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

	/* Force table to not be like tables anymore */
	.cart-page table, .cart-page thead, .cart-page tbody, .cart-page th, .cart-page td, .cart-page tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	.cart-page thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	.cart-page tr { border: 1px solid #ccc; }
	
	.cart-page td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	.cart-page td:before { 
		/* Now like a table header */
		/* Top/left values mimic padding */
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    padding-left: 40px;
	    white-space: nowrap;
	    font-size: 16px;
	    color: #000;
	    font-weight: 500;
	    background-color: #F9F9F9;
	    line-height: 60px;
	    text-align: left;
	}
	.cart-page .table > tbody > tr > td.preview {
		    padding: 85px 50px 25px;
	}
	.cart-page .table > tbody > tr > td {
		    padding: 80px 40px 25px;
	}
	.cart-page .table > tbody > tr > td.del-item {
		text-align: left;
	}
	/*
	Label the data
	*/
	.cart-page td:nth-of-type(1):before { content: "Preview"; }
	.cart-page td:nth-of-type(2):before { content: "Product"; }
	.cart-page td:nth-of-type(3):before { content: "Price"; }
	.cart-page td:nth-of-type(4):before { content: "Quantity"; }
	.cart-page td:nth-of-type(5):before { content: "Total"; }
	.cart-page td:nth-of-type(6):before { content: "Delete Item"; }
}

/* Dashboard Responsive Styles */
@media only screen and (max-width: 991px) {
    .dashboard-wrapper .card {
        margin-bottom: 20px;
    }
    
    .dashboard-wrapper .quick-stats-card {
        margin-bottom: 20px;
    }
    
    .dashboard-wrapper .table-responsive {
        margin-bottom: 0;
    }
}

@media only screen and (max-width: 767px) {
    .dashboard-wrapper .card {
        margin-bottom: 15px;
    }
    
    .dashboard-wrapper .card-body {
        padding: 15px;
    }
    
    .dashboard-wrapper .quick-stats-card {
        margin-bottom: 15px;
    }
    
    .dashboard-wrapper .btn {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .dashboard-wrapper .table th,
    .dashboard-wrapper .table td {
        padding: 8px;
    }
    
    /* Recent Pages tablet improvements */
    .dashboard-wrapper .card .card-body .d-flex {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .dashboard-wrapper .card .card-body .d-flex > div:first-child {
        flex: 1;
        min-width: 0;
    }
    
    .dashboard-wrapper .card .card-body .btn-sm {
        flex-shrink: 0;
        padding: 6px 10px;
        font-size: 12px;
    }
}

@media only screen and (max-width: 480px) {
    .dashboard-wrapper .card-body {
        padding: 10px;
    }
    
    .dashboard-wrapper .quick-stats-card {
        text-align: center;
    }
    
    .dashboard-wrapper .quick-stats-card .icon {
        margin-bottom: 10px;
    }
    
    .dashboard-wrapper .table th,
    .dashboard-wrapper .table td {
        padding: 6px;
        font-size: 14px;
    }
    
    /* Recent Pages mobile improvements */
    .dashboard-wrapper .card .card-body .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px;
    }
    
    .dashboard-wrapper .card .card-body .d-flex > div:first-child {
        width: 100%;
        margin-bottom: 4px;
    }
    
    .dashboard-wrapper .card .card-body .btn-sm {
        align-self: flex-end;
        min-width: auto;
        padding: 4px 8px;
        font-size: 12px;
    }
    
    /* Recent Users mobile improvements for 480px */
    .dashboard-wrapper .card .card-body .d-flex.align-items-center {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 6px;
    }
    
    .dashboard-wrapper .card .card-body .user-avatar {
        align-self: flex-start;
        margin-right: 0 !important;
        margin-bottom: 2px;
    }
    
    .dashboard-wrapper .card .card-body .badge {
        align-self: flex-end;
        margin-left: 0 !important;
        font-size: 9px;
        padding: 2px 5px;
    }
}

/* Medium mobile screens - better transition */
@media only screen and (max-width: 600px) {
    .dashboard-wrapper .card .card-body .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 6px;
    }
    
    .dashboard-wrapper .card .card-body .d-flex > div:first-child {
        width: 100%;
        margin-bottom: 2px;
    }
    
    .dashboard-wrapper .card .card-body .btn-sm {
        align-self: flex-end;
        min-width: auto;
        padding: 5px 8px;
        font-size: 11px;
    }
    
    /* Recent Users mobile improvements */
    .dashboard-wrapper .card .card-body .d-flex.align-items-center {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 8px;
    }
    
    .dashboard-wrapper .card .card-body .user-avatar {
        align-self: flex-start;
        margin-right: 0 !important;
        margin-bottom: 4px;
    }
    
    .dashboard-wrapper .card .card-body .badge {
        align-self: flex-end;
        margin-left: 0 !important;
        font-size: 10px;
        padding: 3px 6px;
    }
}

/* Mobile Navigation Styles */
@media only screen and (max-width: 991px) {
    /* Topbar mobile improvements */
    #topbar .container, #topbar .row {
        width: 100%;
        padding: 0;
        margin: 0;
    }
    .contact-info-centered {
        display: block !important;
        text-align: center !important;
        justify-content: unset !important;
        align-items: unset !important;
        flex-wrap: unset !important;
        gap: unset !important;
    }
    .contact-info {
        width: 100%;
        text-align: left;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        gap: 8px 16px;
        padding: 8px 10px;
    }
    .contact-list {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        padding: 0;
        margin: 0;
        display: flex;
        gap: 8px 16px;
    }
    .contact-item {
        flex: 1 1 180px;
        min-width: 140px;
        max-width: 100%;
        padding: 4px 0;
        white-space: normal;
    }
    .contact-link {
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 6px;
        word-break: break-all;
    }
    
    /* Enhanced Mobile Navigation */
    .nav-bg {
        min-height: 0;
        padding: 0;
        background: #222;
        justify-content: flex-end;
    }
    
    /* Modern Slide-out Menu */
    .mainmenu {
        display: none;
        flex-direction: column;
        align-items: stretch;
        width: 85vw;
        max-width: 400px;
        background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
        box-shadow: -8px 0 32px rgba(0,0,0,0.3);
        z-index: 10002;
        text-align: center;
        position: fixed;
        top: 0;
        right: -100vw;
        height: 100vh;
        border-radius: 0 0 16px 0;
        padding: 0;
        margin-top: 90px;
        transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                    opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        opacity: 0;
        pointer-events: none;
        transform: translateX(20px);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    
    .mainmenu.active {
        display: flex;
        right: 0 !important;
        box-shadow: -12px 0 40px rgba(0,0,0,0.4);
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
    }
    
    /* Enhanced Hamburger Button */
    .mainmenu-toggler {
        display: block !important;
        position: absolute !important;
        top: 20px !important;
        right: 20px !important;
        left: auto !important;
        bottom: auto !important;
        z-index: 10003 !important;
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-dark) 100%) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 12px;
        font-size: 20px;
        cursor: pointer;
        margin: 0;
        box-shadow: 0 4px 16px rgba(32, 178, 170, 0.3);
        width: 52px;
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        overflow: hidden;
    }
    
    .mainmenu-toggler:hover {
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(32, 178, 170, 0.4);
    }
    
    .mainmenu-toggler.active {
        background: linear-gradient(135deg, var(--primary-color-dark) 0%, var(--primary-color) 100%) !important;
        transform: rotate(90deg);
    }
    
    .mainmenu-toggler i {
        transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    .mainmenu-toggler.active i {
        transform: rotate(180deg);
    }
    
    header {
        position: relative;
        z-index: 10001;
    }
    
    /* Enhanced Menu Items */
    .mainmenu li {
        display: block;
        margin: 0;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        width: 100%;
        position: relative;
        overflow: hidden;
    }
    
    .mainmenu li:last-child {
        border-bottom: none;
    }
    
    .mainmenu li:first-child {
        border-top: 1px solid rgba(255,255,255,0.08);
    }
    
    .mainmenu li a {
        color: #fff;
        padding: 20px 32px;
        font-size: 16px;
        font-family: 'Roboto', 'Arial', sans-serif;
        display: flex;
        align-items: center;
        justify-content: center;
        word-break: break-word;
        border-radius: 0;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        font-weight: 500;
        letter-spacing: 0.02em;
        position: relative;
        background: transparent;
        text-decoration: none;
        text-align: center;
    }
    
    .mainmenu li a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-dark) 100%);
        transform: scaleY(0);
        transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    .mainmenu li a:hover,
    .mainmenu li.active > a {
        background: rgba(255,255,255,0.05);
        color: var(--primary-color-light);
        padding-left: 36px;
        transform: translateX(4px);
    }
    
    .mainmenu li a:hover::before,
    .mainmenu li.active > a::before {
        transform: scaleY(1);
    }
    
    /* Menu Header */
    .mainmenu::before {
        content: 'Navigation';
        display: block;
        padding: 24px 32px 16px 32px;
        font-size: 14px;
        font-weight: 600;
        color: rgba(255,255,255,0.6);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        background: rgba(0,0,0,0.2);
        text-align: center;
    }
    
    /* Menu Footer */
    .mainmenu::after {
        content: '';
        display: block;
        flex: 1;
        min-height: 60px;
    }
    
    body.menu-open {
        overflow: hidden;
    }
    
    /* Enhanced Overlay */
    .menu-overlay {
        background: rgba(0,0,0,0.6);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    /* Enhanced Focus States */
    .mainmenu-toggler.focused {
        outline: 2px solid var(--primary-color);
        outline-offset: 2px;
    }
    
    /* Click Effect for Menu Items */
    .mainmenu li a.clicked {
        background: rgba(224, 155, 25, 0.2) !important;
        transform: scale(0.98) translateX(4px) !important;
        transition: all 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    }
    
    /* Enhanced Dropdown Indicators */
    .mainmenu li.dropdown > a::after {
        content: '\f107';
        font-family: 'FontAwesome';
        margin-left: auto;
        font-size: 14px;
        transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        opacity: 0.7;
    }
    
    .mainmenu li.dropdown.active > a::after {
        transform: rotate(180deg);
        opacity: 1;
    }
    
    /* Submenu Styling */
    .mainmenu .submenu {
        background: rgba(0,0,0,0.3);
        border-left: 3px solid var(--primary-color);
        margin-left: 0;
        padding-left: 0;
    }
    
    .mainmenu .submenu li a {
        padding-left: 48px;
        font-size: 14px;
        opacity: 0.9;
    }
    
    .mainmenu .submenu li a:hover {
        opacity: 1;
        background: rgba(255,255,255,0.08);
    }
    
    /* Loading Animation for Menu Items */
    .mainmenu li a {
        opacity: 0;
        transform: translateX(20px);
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    .mainmenu.active li a {
        opacity: 1;
        transform: translateX(0);
    }
    
    /* Enhanced Accessibility */
    .mainmenu li a:focus {
        outline: 2px solid var(--primary-color);
        outline-offset: -2px;
        background: rgba(255,255,255,0.1);
    }
    
    /* Smooth Scroll Prevention */
    body.menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
    }
}

/* Small Mobile Styles */
@media only screen and (max-width: 480px) {
    .mainmenu {
        width: 90vw;
        max-width: 350px;
        border-radius: 0 0 12px 0;
    }
    
    .mainmenu li a {
        padding: 16px 24px;
        font-size: 15px;
        text-align: center;
        justify-content: center;
    }
    
    .mainmenu::before {
        padding: 20px 24px 12px 24px;
        font-size: 13px;
        text-align: center;
    }
    
    .mainmenu-toggler {
        width: 48px;
        height: 48px;
        font-size: 18px;
        top: 18px;
        right: 16px;
    }

    .contact-text {
        font-size: 12px;
    }

    .contact-link i {
        font-size: 14px;
    }
}

/* Extra Small Mobile Styles */
@media only screen and (max-width: 360px) {
    .mainmenu {
        width: 95vw;
        max-width: 320px;
    }
    
    .mainmenu li a {
        padding: 14px 20px;
        font-size: 14px;
    }
    
    .mainmenu::before {
        padding: 18px 20px 10px 20px;
        font-size: 12px;
    }
    
    /* Move hamburger menu over and make it smaller to prevent logo overlap */
    .mainmenu-toggler {
        width: 40px;
        height: 40px;
        font-size: 14px;
        top: 20px;
        right: 8px;
    }
    
    /* Adjust logo positioning to give more space */
    header.construct.header-curvy .logo {
        max-width: 70% !important;
        margin-right: 50px !important;
    }
    
    .mainmenu .submenu li a {
        padding-left: 40px;
        font-size: 13px;
    }
}

/* Landscape Mobile Styles */
@media only screen and (max-width: 991px) and (orientation: landscape) {
    .mainmenu {
        height: 100vh;
        overflow-y: auto;
        padding-bottom: 20px;
    }
    
    .mainmenu li a {
        padding: 14px 28px;
        font-size: 15px;
    }
    
    .mainmenu::before {
        padding: 16px 28px 12px 28px;
        font-size: 13px;
    }
    
    .mainmenu-toggler {
        top: 16px;
        right: 16px;
    }
}

/* High DPI Display Enhancements */
@media only screen and (-webkit-min-device-pixel-ratio: 2), 
       only screen and (min-resolution: 192dpi) {
    .mainmenu {
        box-shadow: -8px 0 32px rgba(0,0,0,0.3), 0 0 0 0.5px rgba(255,255,255,0.05);
    }
    
    .mainmenu.active {
        box-shadow: -12px 0 40px rgba(0,0,0,0.4), 0 0 0 0.5px rgba(255,255,255,0.08);
    }
    
    .mainmenu-toggler {
        box-shadow: 0 4px 16px rgba(32, 178, 170, 0.3);
    }
    
    .mainmenu-toggler:hover {
        box-shadow: 0 6px 20px rgba(32, 178, 170, 0.4);
    }
}

@media only screen and (max-width: 991px) {
    header .clearfix {
        flex-direction: column;
        align-items: stretch;
    }
    .pull-left.logo {
        padding: 4px 0 4px 0 !important;
        margin: 0 !important;
        width: auto;
        max-width: 90vw;
    }
    .pull-left.logo img {
        max-height: 60px;
        height: auto;
        width: auto;
    }
    .mainmenu li a {
        font-size: 15px;
        padding: 12px 14px;
        word-break: break-word;
    }

	header.construct.header-curvy .logo img {
		max-height: 75px !important;
	}
}

@media only screen and (max-width: 991px) {
    html, body {
        overflow-x: hidden;
    }
    .container, .row {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }
    .mainmenu li a {
        font-size: 15px;
        padding: 12px 14px;
        word-break: break-word;
    }
	
}

.menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.45);
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(.77,0,.18,1);
}

body.menu-open .menu-overlay {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

@media only screen and (max-width: 1200px) {
    header.construct.header-curvy {
        min-height: 90px;
        height: 90px;
        padding: 0;
    }
    header .clearfix {
        min-height: 90px;
        height: 90px;
        align-items: center;
    }
    .pull-left.logo {
        padding: 2px 0 2px 0 !important;
        margin: 0 !important;
        max-height: 90px;
        display: flex;
        align-items: center;
    }
    .pull-left.logo img {
        max-height: 70px;
        height: auto;
        width: auto;
    }
    .mainmenu {
        min-height: 90px;
        align-items: center;
    }
    .mainmenu li a {
        padding-top: 18px;
        padding-bottom: 18px;
    }
	
}

@media only screen and (max-width: 1000px) {
    #topbar .container, #topbar .row {
        width: 100%;
        padding: 0 6px;
        margin: 0;
        box-sizing: border-box;
    }
    .contact-info-centered {
        display: block !important;
        text-align: center !important;
        justify-content: unset !important;
        align-items: unset !important;
        flex-wrap: unset !important;
        gap: unset !important;
    }
    .contact-info {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        gap: 6px 10px;
        padding: 6px 0;
        font-size: 14px;
    }
    .contact-list {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        padding: 0;
        margin: 0;
        display: flex;
        gap: 6px 10px;
    }
    .contact-item {
        flex: 1 1 180px;
        min-width: 120px;
        max-width: 100%;
        padding: 2px 0;
        white-space: normal;
    }
    .contact-link {
        font-size: 13px;
        display: flex;
        align-items: center;
        gap: 4px;
        word-break: break-all;
    }
    .contact-link i {
        font-size: 15px;
        margin-right: 4px;
    }
    .contact-text {
        font-size: 13px;
    }
}

@media only screen and (max-width: 700px) {
    .contact-info, .contact-list {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px 0;
    }
    .contact-item {
        min-width: 0;
        width: 100%;
        flex: 1 1 100%;
    }
    .contact-link {
        font-size: 12px;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    .contact-link i {
        font-size: 13px;
    }
    .contact-text {
        font-size: 12px;
    }
}

/* Fix red background for 600px-768px breakpoint */
@media (min-width: 600px) and (max-width: 767px) {
  header.construct.header-curvy {
    height: 100px;
    background: var(--primary-color) !important;
  }
  header.construct.header-curvy .logo:before {
    display: none !important;
  }
  
  .mainmenu-toggler {
    top: 26px !important;
  }
}

@media (max-width: 600px) {
  header.construct.header-curvy {
	height: 100px;
    background: var(--primary-color) !important;
  }
  header.construct.header-curvy .logo:before {
    display: none !important;
  }
  
  .mainmenu-toggler {
    top: 26px !important;
  }

  /* Ensure mobile menu still works under 600px */
  header.construct.header-curvy .mainmenu-container {
    background: transparent !important;
    position: relative;
    margin: 0;
    top: 0;
  }

  /* Override any conflicting styles for mobile menu */
  .mainmenu {
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 85vw !important;
    max-width: 400px !important;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
    box-shadow: -8px 0 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.05) !important;
    z-index: 10002 !important;
    text-align: center !important;
    position: fixed !important;
    top: 0 !important;
    right: -100vw !important;
    height: 100vh !important;
    border-radius: 0 0 16px 0 !important;
    padding: 0 !important;
    margin-top: 90px !important;
    transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateX(20px) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }
  
  .mainmenu.active {
    display: flex !important;
    right: 0 !important;
    box-shadow: -12px 0 40px rgba(0,0,0,0.4) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(0) !important;
  }
  
  .mainmenu li {
    display: block !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
  }
  
  .mainmenu li:last-child {
    border-bottom: none !important;
  }
  
  .mainmenu li:first-child {
    border-top: 1px solid rgba(255,255,255,0.08) !important;
  }
  
  .mainmenu li a {
    color: #fff !important;
    padding: 20px 32px !important;
    font-size: 16px !important;
    font-family: 'Roboto', 'Arial', sans-serif !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    word-break: break-word !important;
    border-radius: 0 !important;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    position: relative !important;
    background: transparent !important;
    text-decoration: none !important;
    text-align: center !important;
  }
  
  .mainmenu li a::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
		width: 4px !important;
		height: 100% !important;
		background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-dark) 100%) !important;
		transform: scaleY(0) !important;
		transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
	}
	
	.mainmenu li a:hover,
	.mainmenu li.active > a {
		background: rgba(255,255,255,0.05) !important;
		color: var(--primary-color-light) !important;
    padding-left: 36px !important;
    transform: translateX(4px) !important;
  }
  
  .mainmenu li a:hover::before,
  .mainmenu li.active > a::before {
    transform: scaleY(1) !important;
  }
  
  .mainmenu::before {
    content: 'Navigation' !important;
    display: block !important;
    padding: 24px 32px 16px 32px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,0.6) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    background: rgba(0,0,0,0.2) !important;
    text-align: center !important;
  }
  
  .mainmenu::after {
    content: '' !important;
    display: block !important;
    flex: 1 !important;
    min-height: 60px !important;
  }
}

@media (min-width: 990px) and (max-width: 1200px) {
  .nav-flex .mainmenu {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 0 auto;
    gap: 30px;
    justify-content: right;
    background: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  
  .nav-flex .mainmenu-container {
    background: transparent !important;
    box-shadow: none !important;
  }
  .nav-flex .mainmenu li a {
    display: inline-block;
    white-space: nowrap;
    line-height: 36px;
    font-size: 15px;
  }
  .nav-flex .mainmenu::before {
    content: none;
    background: none;
  }
}

@media (min-width: 1201px) {
  .nav-flex .mainmenu {
    position: static;
    z-index: auto;
    padding: 0;
    max-width: none;
    margin: 0;
    gap: 40px;
    justify-content: right;
    background: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  
  .nav-flex .mainmenu-container {
    background: transparent !important;
    box-shadow: none !important;
  }
  .nav-flex .mainmenu li a {
    font-size: 18px;
    line-height: 100px;
  }
  .nav-flex .mainmenu::before {
    content: none;
    background: none;
  }
}

@media only screen and (min-width: 992px) {
  .mainmenu-toggler {
    display: none !important;
  }
}

@media only screen and (max-width: 991px) {
  header.construct.header-curvy .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 90px !important;
    align-items: stretch !important;
  }
  header.construct.header-curvy .logo {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: 100%;
  }
  header.construct.header-curvy .logo:before{
	right: 120px !important;
  }
}

@media only screen and (max-width: 500px) {
  /* Move hamburger menu over and make it smaller to prevent logo overlap */
  .mainmenu-toggler {
    width: 40px !important;
	height: 40px !important;
	font-size: 16px !important;
	top: 20px !important;
	right: 8px !important;
	border-width: 2px !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	padding: 0 !important;
	border-radius: 8px;
  }
  
  /* Adjust logo positioning to give more space */
  header.construct.header-curvy .logo {
    max-width: 75% !important;
    margin-right: 50px !important;
  }
  
  header.construct.header-curvy .logo img {
	max-height: 75px !important;
  }
}

/* === Responsive Refactor for Services Section === */
@media only screen and (max-width: 991px) {
  #service-we-provide .service-tab-title ul {
    gap: 10px;
    flex-wrap: wrap;
  }
  #service-we-provide .service-tab-title ul li {
    flex: 1 1 45%;
    text-align: center;
    font-size: 14px;
    padding: 8px 6px;
    border-radius: 0;
    border-left: 0;
    border-bottom: 2px solid #eee;
  }
  #service-we-provide .service-tab-title ul li.active,
  #service-we-provide .service-tab-title ul li:hover {
    border-bottom: 2px solid var(--primary-color);
    border-left: 0;
    background: #f8f9fa;
    color: var(--primary-color);
  }
  #service-we-provide .service-tab-content {
    flex-direction: column;
    padding: 18px 6px 14px 6px;
    gap: 18px;
  }
  #service-we-provide .service-tab-content > div {
    max-width: 100%;
  }
  #service-we-provide .service-tab-content .service-image {
    max-width: 100%;
    margin: 0 auto 18px auto;
    justify-content: center;
  }
}
@media (max-width: 600px) {
  #service-we-provide .service-tab-title ul {
    flex-direction: column;
    gap: 0;
  }
  #service-we-provide .service-tab-title ul li {
    flex: 1 1 100%;
    font-size: 13px;
    padding: 8px 2px;
    border-radius: 0;
    border-left: 0;
    border-bottom: 2px solid #eee;
  }
  #service-we-provide .service-tab-title ul li.active,
  #service-we-provide .service-tab-title ul li:hover {
    border-bottom: 2px solid var(--primary-color);
    border-left: 0;
    background: #f8f9fa;
    color: var(--primary-color);
  }
  #service-we-provide .service-tab-content {
    padding: 10px 2vw 10px 2vw;
    gap: 10px;
  }
}
/* Remove old vertical tab column widths */
#service-we-provide .row > .col-lg-3,
#service-we-provide .row > .col-lg-9 {
  width: 100%;
  max-width: 100%;
  float: none;
  display: block;
  padding: 0;
}
#service-we-provide .row {
  display: block;
  margin: 0;
}
/* End Responsive Refactor */

/* === About Page Responsive Overrides === */
@media (max-width: 991px) {
  .about-flex-wrap {
    flex-direction: column;
    gap: 0;
  }
  .about-values-card {
    margin-top: 18px;
    margin-bottom: 0;
    max-width: 100%;
  }
  .about-main-title, .about-section-title {
    font-size: 1.3rem;
    margin-bottom: 12px;
  }
  .about-section-subtitle {
    font-size: 1.05rem;
    margin: 12px 0 8px 0;
  }
  .values-list, .company-info-list {
    font-size: 1rem;
    padding-left: 14px;
  }
}

/* Ensure topbar is always above navbar */
#topbar {
    position: fixed;
	top: 0;
    left: 0;
    width: 100%;
    transition: top 0.3s;
    will-change: transform;
}

/* Navbar always fixed at the very top, below topbar */
header.construct.header-curvy {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    width: 100%;
    height: 90px;
    z-index: 100;
}

/* Add padding to body to prevent content jump due to fixed bars */
body {
    padding-top: 90px;
}

@media (min-width: 1200px) {
  header.construct.header-curvy .container {
    display: block !important;
    align-items: unset !important;
    justify-content: unset !important;
  }
  header.construct.header-curvy .mainmenu-container {
    display: block !important;
    align-items: unset !important;
    justify-content: unset !important;
  }
}

#topbar {
    background: #161616;
    padding: 0;
}

#topbar .container {
    max-width: 100%;
    padding: 0 15px;
}

#topbar .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
}

#topbar .contact-info {
    width: 100%;
}

#topbar .contact-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #A2A2A2;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

#topbar .contact-link:hover {
    color: var(--primary-color);
}

#topbar .contact-link i {
    margin-right: 8px;
    font-size: 15px;
}

@media only screen and (max-width: 767px) {
    #topbar .contact-list {
        flex-direction: column;
    }
    
    #topbar .contact-item {
        width: 100%;
    }
    
    #topbar .contact-link {
        justify-content: flex-start;
    }
}