@media only screen and (max-width: 1800px) {
	.main-slider .slider-wrapper .image img {
		width: auto;
	}
}

@media only screen and (max-width: 1300px) {
	.page-wrapper {
		overflow: hidden;
	}
}

@media only screen and (min-width: 1200px) {
	.five-column {
		max-width: 20%;
	}
}

@media only screen and (max-width: 1199px) {
	.page-wrapper {
		margin-bottom: 0px !important;
	}
	.header-contact-info ul li {
		margin-right: 24px;
	}
	.header-info .main-logo a {
		margin: 0px;
	}
	.fluid-section .left-column,
	.fluid-section .right-column {
		width: 100%;
		float: none;
	}
	.fluid-section .right-column .content-area {
		max-width: 100%;
		padding-left: 15px;
	}
	.fluid-section .left-column .inner-column {
		padding-left: 15px;
		padding-right: 15px;
	}
	.main-header .header-upper.style-two .upper-right {
		padding: 0;
	}
	.main-header .header-upper.style-two .upper-right:before {
		display: none;
	}
	.mission-section .left-column {
		width: 100%;
	}
	.mission-section .left-column .inner-column {
		float: left;
	}
	.mission-section .right-column {
		width: 100%;
		padding-left: 15px;
	}
	.owl-nav-style-four .owl-nav .owl-prev {
		left: 10px;
	}
	.owl-nav-style-four .owl-nav .owl-next {
		right: 10px;
	}
	.call-to-action-section .left-column .inner-column {
		padding-bottom: 0px;
	}
	.call-to-action-section .right-column {
		float: left;
	}
	.call-to-action-section .right-column .inner-column {
		padding-top: 20px;
	}

	/* --- NEW/MODIFIED RULES for 1199px and below --- */

	/* Ensure header info stacks nicely on medium screens */
	.main-header .header-info .float-right {
		width: 100%;
		float: none !important;
		margin-top: 20px;
	}
	.header-contact-info ul {
		display: block;
		text-align: center;
	}
	.header-contact-info ul li {
		float: none;
		margin-right: 0;
		display: block;
		padding-left: 0;
		margin-top: 15px;
		margin-bottom: 15px;
	}
	.header-contact-info ul li .iocn-holder {
		position: static;
		margin-bottom: 10px;
	}
	.header-contact-info ul li .text-holder {
		padding-left: 0;
	}
}

@media only screen and (min-width: 992px) {
	.row.row-revers-lg {
	  -webkit-box-orient: horizontal !important;
	  -webkit-box-direction: reverse !important;
	  -ms-flex-direction: row-reverse !important;
	  flex-direction: row-reverse !important;
	}
}

@media only screen and (max-width: 991px) {
	.main-menu .navigation>li.dropdown:before {
		display: none;
	}
	.main-header .header-upper.style-two .upper-right{
		display: block;
	}
	.about-section .content-column {
		width: 100%;
		float: none;
	}
	.about-section .about-block-area {
		float: none;
	}
	.about-section .image-column {
		background-image: none !important;
	    position: relative;
	    width: 100%;
	}
	.about-section .image-column .image-box {
		display: block;
	}
	.main-footer .posts-widget {
		padding-right: 0px;
		margin-left: 0px;
	}
	.counter-block .inner-box {
		margin-bottom: 60px;
	}
	.our-skill {
		margin-bottom: 50px;
	}
	.main-slider .active h5 {
		color: #fff;
	}
	.welcome-block-two .inner-box {
		margin-bottom: 30px;
	}
	.about-block-area {
		margin-bottom: 50px;
	}
	
	/* --- NEW/MODIFIED RULES for 991px and below --- */

	/* Re-center logo/header for mobile-first */
	.main-header .header-info .float-left,
	.main-header .header-info .float-right {
		float: none !important;
		width: 100%;
		text-align: center;
	}
	.main-header .header-info .float-left {
		margin-bottom: 10px;
	}

	/* Main Slider adjustments for readability */
	.main-slider .slide {
		padding: 150px 0px; /* Reduced padding for smaller height */
	}
	.main-slider h1 {
		font-size: 38px;
		line-height: 44px;
	}

	/* Adjust Welcome Section block layout */
	.welcome-section .welcome-block {
		margin-bottom: 30px;
	}
	.welcome-block .inner-box {
		padding-left: 0;
		text-align: center;
	}
	.welcome-block .icon-box {
		position: static;
		border-right: none;
		margin-bottom: 15px;
	}
	.welcome-block .icon-box i {
		line-height: 1em;
	}

    /* Reduce Header info overall padding and logo size */
	.main-header .header-info {
		padding: 20px 0;
		/* Removing border since it's redundant/unnecessary for stacked view */
		border-bottom: none; 
	}
	.header-info .main-logo a img {
		height: 60px; /* Smaller logo */
	}
}

@media only screen and (max-width: 767px) {
	.contact-info-section-two .image-column,
	.contact-info-section-two .content-column {
		position: relative;
		width: 100%;
	}
	.contact-info-section-two .image-column .image-box {
		display: block;
	}
	.header-top .topbar-info {
		margin-top: 25px;
	}
	.header-top .top-right:before {
		left: -150px;
		bottom: -13px;
		top: inherit;
	}

	/* --- NEW/MODIFIED RULES for 767px and below --- */

	/* Fluid Section: Make left content area full width */
	.fluid-section .left-column {
		width: 100%;
		float: none;
		padding: 60px 15px 60px; /* Reduced padding for mobile */
	}
	.fluid-section .left-column .inner-column {
		padding: 0;
	}

	/* Fluid Section: Adjust right content for a mobile layout */
	.fluid-section .right-column .content-area {
		padding: 60px 15px; /* Reduced padding for mobile */
		padding-left: 15px; /* Override any larger left padding */
	}

	/* Funfact/Counter blocks should stack on small screens */
	.funfact-section .fact-counter .counter-block {
		padding-left: 15px;
		padding-right: 15px;
		width: 50%; /* Make them stack 2 per row */
		float: left;
	}
	.counter-block .inner-box {
		margin-bottom: 30px; /* Reduce spacing between blocks */
	}

	/* Call to Action Section: Stack elements */
	.call-to-action-section .outer-container {
		padding: 0 15px;
	}
	.call-to-action-section .left-column,
	.call-to-action-section .right-column {
		width: 100%;
		float: none;
		text-align: center;
	}
	.call-to-action-section .left-column .inner-column {
		padding: 40px 0 0;
	}
	.call-to-action-section .right-column .inner-column {
		padding: 20px 0 40px;
		text-align: center;
	}

	/* Consultation Section: Optimize form for mobile */
	.consultation-section h1 {
		font-size: 30px;
		line-height: 1.2em;
	}
	.consultation-section .number {
		font-size: 35px;
	}
	.consultation-section form input {
		width: 100%; /* Make input full width */
		margin-bottom: 15px;
	}
	.consultation-section form button {
		width: 100%; /* Make button full width */
	}
	.consultation-section form {
		max-width: 100%;
	}

	/* Main Footer: Remove column specific margins/padding */
	.main-footer .posts-widget {
		margin-left: 0;
	}

	/* Team Section: Fix stacking on smaller columns */
	.team-block {
		margin-bottom: 30px;
	}

	/* Why Choose Us section: remove padding from inner skill box */
	.our-skill {
		padding: 30px 20px;
		margin-bottom: 30px;
	}
}

@media only screen and (max-width: 599px) {
	.main-slider h1 {
		font-size: 48px;
		line-height: 50px;
	}
	.main-slider .content:before {
		display: none;
	}
	.page-title .outer-box {
	    display: block;
	}

	/* --- NEW/MODIFIED RULES for 599px and below --- */

	/* Main Slider: Further reduce size for smaller screens */
	.main-slider h1 {
		font-size: 32px;
		line-height: 40px;
	}
	
	/* Funfact/Counter blocks to stack 1 per row */
	.funfact-section .fact-counter .counter-block {
		width: 100%;
	}

	/* Reduce height of header top bar (social/FAQ section) */
	.header-top {
		padding: 10px 0px; /* Reduced padding */
	}
	.header-top .social-links a {
		padding: 0 5px; /* Reduced horizontal spacing */
	}

	/* Further reduce header info spacing to save height */
	.header-contact-info ul li .iocn-holder span {
		font-size: 30px; /* Smaller icon */
	}
	.header-contact-info ul li .text-holder h6 {
		font-size: 14px; /* Smaller heading */
		margin-bottom: 5px;
	}
	.header-contact-info ul li .text-holder p {
		font-size: 13px; /* Smaller text */
		line-height: 1.3em;
	}
}


@media only screen and (max-width: 499px) {
	.author-box .inner-box {
	    padding-left: 30px;
	}

	.author-box .image {
	    position: relative;
	    left: 0;
	    top: -15px;
	}

	.sidebar-page-container .comments-area .comment-box.comment-reply-box {
	    margin-left: 0;
	}

	/* --- NEW/MODIFIED RULES for 499px and below --- */

	/* Hide the text descriptions in the contact info to save major vertical space */
	.header-contact-info ul li .text-holder p {
		display: none; 
	}

	/* Make the icon and title stack tighter */
	.header-contact-info ul li .text-holder {
		display: inline-block;
		margin-left: 10px;
		vertical-align: top;
	}
	.header-contact-info ul li .iocn-holder {
		display: inline-block;
		vertical-align: top;
	}
	.header-contact-info ul li {
		padding-left: 0;
		margin-top: 5px;
		margin-bottom: 5px;
	}
}