/*
	Theme Name:	Tracom Child
	Theme URI:	http://themeforest.net/user/Codevz/portfolio
	Description:Sample child theme of Xtra theme for customization.
	Author:		Fredrick Boaz
	Author URI:	http://dsc.co.ke
	Template:	tracom
	Version:	1.0
*/
.page_title span {
			color: #5f3f91 !important;
		}

		/* Breadcrumb icons - visible on orange background */
		.breadcrumbs i.fa,
		.breadcrumbs i.fa::before,
		.page_title .breadcrumbs i {
			color: #5f3f91 !important;
			font-family: "Font Awesome 6 Free" !important;
			font-weight: 900 !important;
			display: inline-block !important;
			font-style: normal !important;
		}
/* =============================================
   TABLET RESPONSIVE (max-width: 768px)
   ============================================= */
@media screen and (max-width: 768px) {

	/* --- Global / Layout --- */
	body {
		overflow-x: hidden;
	}
	#layout,
	.row,
	.inner_layout {
		max-width: 100% !important;
		width: 100% !important;
	}
	img {
		max-width: 100%;
		height: auto;
	}

	/* --- Grid columns stack on tablet --- */
	.col,
	.col.s1, .col.s2, .col.s3, .col.s4, .col.s5, .col.s6,
	.col.s7, .col.s8, .col.s9, .col.s10, .col.s11, .col.s12 {
		width: 100% !important;
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* --- WPBakery columns stack --- */
	.wpb_column,
	.vc_column_container {
		width: 100% !important;
		float: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.vc_row .vc_column_container,
	.vc_row .wpb_column {
		width: 100% !important;
	}
	/* Inner row columns too (support section 1/4 cols) */
	.vc_inner .vc_column_container,
	.vc_row-has-fill > .vc_column_container {
		width: 100% !important;
	}

	/* --- Header --- */
	.header_1,
	.header_2,
	.header_3,
	.header_5 {
		display: none !important;
	}
	.header_4,
	.cz_before_mobile_header,
	.cz_after_mobile_header {
		display: block !important;
	}

	/* Mobile header layout: logo far left, menu icon far right */
	.header_4 .row.elms_row {
		padding: 0;
		margin: 0;
		width: 100% !important;
		max-width: 100% !important;
	}
	.header_4 .elms_row > .clr {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		min-height: 60px;
		padding: 0 10px;
		width: 100% !important;
	}
	.header_4 .elms_left {
		display: flex !important;
		align-items: center !important;
		width: auto !important;
		flex: 0 0 auto !important;
		float: none !important;
		margin: 0 !important;
		padding: 0 !important;
		text-align: left !important;
	}
	.header_4 .elms_right {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		width: auto !important;
		flex: 0 0 auto !important;
		float: none !important;
		margin: 0 !important;
		padding: 0 !important;
		text-align: right !important;
	}
	.header_4 .elms_left > div,
	.header_4 .elms_right > div {
		float: none !important;
		display: flex !important;
		align-items: center;
		margin: 0 !important;
		padding: 0 !important;
	}
	.header_4 .elms_center {
		display: none !important;
	}
	.header_4 .logo_is_img img {
		max-height: 50px;
		width: auto !important;
	}
	.header_4 .cz_elm[class*="logo"] {
		margin: 10px 0 !important;
	}
	.header_4 .cz_elm[class*="menu"] {
		margin: 0 !important;
	}

	/* Other header elements stack (exclude header_4) */
	.header_1 .elms_row > .clr,
	.header_2 .elms_row > .clr,
	.header_3 .elms_row > .clr {
		display: block !important;
	}
	.header_1 .elms_left,
	.header_1 .elms_center,
	.header_1 .elms_right,
	.header_2 .elms_left,
	.header_2 .elms_center,
	.header_2 .elms_right,
	.header_3 .elms_left,
	.header_3 .elms_center,
	.header_3 .elms_right,
	.header_5 .elms_left,
	.header_5 .elms_center,
	.header_5 .elms_right {
		display: block !important;
		width: 100% !important;
		text-align: center !important;
		float: none !important;
	}
	.header_1 .elms_left > div,
	.header_1 .elms_right > div,
	.header_2 .elms_left > div,
	.header_2 .elms_right > div,
	.header_3 .elms_left > div,
	.header_3 .elms_right > div,
	.header_5 .elms_left > div,
	.header_5 .elms_right > div {
		float: none !important;
		display: inline-block !important;
	}
	.have_center > .elms_row > .clr {
		flex-direction: column;
	}
	.have_center .elms_left,
	.have_center .elms_center,
	.have_center .elms_right {
		flex-basis: auto !important;
	}

	/* --- Navigation / Menu --- */
	/* Hide desktop nav but keep the <ul> accessible for JS cloning */
	.header_1 .sf-menu,
	.header_2 .sf-menu,
	.header_3 .sf-menu,
	.header_5 .sf-menu {
		display: none !important;
	}
	/* Hide both theme menu icons on mobile — we inject our own button */
	i.icon_mobile_offcanvas_menu,
	i.icon_mobile_offcanvas_menu.hide,
	i.icon_offcanvas_menu,
	.header_4 i.icon_offcanvas_menu,
	.header_4 i.icon_mobile_offcanvas_menu,
	svg.icon_mobile_offcanvas_menu,
	svg.icon_offcanvas_menu,
	.header_4 svg.icon_offcanvas_menu,
	.header_4 svg.icon_mobile_offcanvas_menu,
	.icon_offcanvas_menu,
	.icon_mobile_offcanvas_menu {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		overflow: hidden !important;
		position: absolute !important;
		pointer-events: none !important;
	}
	/* Hide the inline <ul> menu in header_4 */
	.header_4 ul.offcanvas_menu {
		display: none !important;
	}
	/* Our custom hamburger button */
	#cz_mobile_menu_btn {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		background: #ffa800;
		color: #fff;
		border: none;
		border-radius: 4px;
		font-size: 20px;
		cursor: pointer;
		-webkit-tap-highlight-color: rgba(0,0,0,0.2);
		touch-action: manipulation;
		padding: 0;
		margin: 0;
		line-height: 1;
	}
	.header_4 {
		position: relative;
		z-index: 9999;
	}

	/* Off-canvas panel: slide from left */
	.sidebar_offcanvas_area,
	body > .offcanvas_area {
		max-width: 80vw !important;
		width: 300px !important;
		display: block !important;
		z-index: 99999 !important;
		left: 0 !important;
		right: auto !important;
		transform: translateX(-120%) !important;
	}
	.active_offcanvas .offcanvas_area.active_offcanvas {
		transform: translateX(0) !important;
	}
	/* Close button inside panel, top-right corner */
	i.offcanvas-close {
		display: none !important;
	}
	.cz_mobile_close_btn {
		position: absolute;
		top: 10px;
		right: 10px;
		z-index: 100;
		color: #333;
		font-size: 22px;
		cursor: pointer;
		padding: 8px;
		background: none;
		border: none;
		width: 40px;
		height: 40px;
		display: flex !important;
		align-items: center;
		justify-content: center;
		line-height: 1;
	}
	.cz_mobile_close_btn:hover {
		color: #ffa800;
	}
	/* Make room for close button in the panel */
	body > .offcanvas_area {
		padding-top: 50px !important;
	}
	/* Overlay for click-outside-to-close */
	.cz_overlay {
		position: fixed !important;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5) !important;
		z-index: 99998 !important;
		display: none;
	}
	.active_offcanvas .cz_overlay {
		display: block !important;
	}

	/* Fixed side header */
	.is_fixed_side {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.fixed_side,
	.cz_fixed_side {
		display: none !important;
	}

	/* --- Content & Sidebar --- */
	.page_content {
		margin: 30px 0 !important;
	}
	.page_content > .row > .col {
		width: 100% !important;
		float: none !important;
		margin-left: 0 !important;
	}
	.sidebar_inner {
		margin-top: 30px;
	}

	/* --- WPBakery spacing fixes --- */
	.vc_column-inner {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}
	.vc_row[data-vc-stretch-content] .vc_column-inner {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}
	/* Add vertical spacing between stacked columns */
	.wpb_column {
		margin-bottom: 20px !important;
	}
	.vc_row {
		margin-bottom: 15px !important;
	}
	/* WPBakery text content spacing */
	.wpb_text_column {
		margin-bottom: 15px !important;
	}
	.wpb_content_element {
		margin-bottom: 20px !important;
	}
	/* Inner page content area */
	.page_content .row {
		padding-left: 10px;
		padding-right: 10px;
	}
	/* Page title section */
	.page_title {
		padding: 15px 0 !important;
	}
	.page_title .codevz-section-title {
		font-size: 20px !important;
	}
	/* Breadcrumb icons - visible on orange background */
	.breadcrumbs i.fa,
	.page_title .breadcrumbs i {
		color: #ffffff !important;
		font-family: "Font Awesome 6 Free" !important;
		font-weight: 900 !important;
		display: inline-block !important;
		font-style: normal !important;
	}
	/* Override large inline font sizes from VC custom headings */
	.vc_custom_heading {
		font-size: inherit !important;
	}
	.vc_custom_heading h3[style*="font-size"] {
		font-size: 24px !important;
	}
	.vc_custom_heading p[style*="font-size"] {
		font-size: 15px !important;
		line-height: 1.6 !important;
	}

	/* --- Revolution Slider 5 --- */
	/* Full-width slider end to end */
	.rev_slider_wrapper,
	.rev_slider_wrapper .rev_slider {
		width: 100vw !important;
		max-width: 100vw !important;
		left: 50% !important;
		right: 50% !important;
		margin-left: -50vw !important;
		margin-right: -50vw !important;
		min-height: 400px !important;
		max-height: none !important;
		overflow: hidden;
	}
	.rev_slider {
		min-height: 400px !important;
	}
	/* Ensure slider caption text is readable on mobile */
	.rev_slider .tp-caption {
		white-space: normal !important;
		word-break: break-word;
		max-width: 90vw !important;
	}
	/* Master caption box */
	.master-caption {
		width: 95% !important;
		padding: 20px !important;
		box-sizing: border-box;
	}
	.master-caption h2 {
		font-size: 22px !important;
		line-height: 1.3 !important;
		white-space: normal !important;
		font-family: 'Open Sans', sans-serif !important;
	}
	.master-caption .dbold {
		font-size: 24px !important;
		line-height: 1.3 !important;
		white-space: normal !important;
		margin-bottom: 15px !important;
		font-family: 'Open Sans', sans-serif !important;
	}
	.master-caption .dboldb {
		font-size: 20px !important;
		line-height: 1.3 !important;
		white-space: normal !important;
		margin-bottom: 15px !important;
		font-family: 'Open Sans', sans-serif !important;
	}
	/* CTA button in slider */
	.master-caption .bigs {
		font-size: 16px !important;
		padding: 12px 28px !important;
		display: inline-block !important;
		font-family: 'Open Sans', sans-serif !important;
	}
	.rev-btn {
		font-size: 16px !important;
		padding: 12px 28px !important;
		font-family: 'Open Sans', sans-serif !important;
	}
	/* Slider paragraph text */
	.master-caption .lightcards {
		font-size: 14px !important;
		line-height: 1.5 !important;
		white-space: normal !important;
		word-break: break-word;
		margin-bottom: 15px !important;
		font-family: 'Open Sans', sans-serif !important;
		color: #fff !important;
	}
	.master-caption .slider-huge {
		font-size: 22px !important;
		line-height: 1.3 !important;
		white-space: normal !important;
		font-family: 'Open Sans', sans-serif !important;
	}
	/* Stop RevSlider from shrinking text too much */
	.tp-resizeme {
		font-size: inherit !important;
	}

	/* --- Carousel (clients section) --- */
	.cz_carousel .slick-slide {
		padding: 5px !important;
	}

	/* --- Social icons bar --- */
	.region-footer-social-networks,
	.block-socialsmenu {
		text-align: center !important;
	}
	.block-socialsmenu ul {
		display: flex !important;
		justify-content: center !important;
		flex-wrap: wrap;
	}

	/* --- SVG animated button (Request for Support) --- */
	.svg-wrapper {
		max-width: 100%;
	}
	.svg-wrapper svg {
		max-width: 100%;
		height: auto;
	}

	/* --- Footer --- */
	.page_footer .col {
		width: 100% !important;
		float: none !important;
		margin-left: 0 !important;
		margin-bottom: 20px;
		text-align: left;
	}
	/* Solutions We Offer - 2 column grid on mobile */
	#codevzcustommenulist2-2 .codevz-widget-content .clr {
		display: flex !important;
		flex-wrap: wrap !important;
	}
	#codevzcustommenulist2-2 .codevz-widget-content .col.s6 {
		width: 50% !important;
		float: none !important;
		box-sizing: border-box;
		padding-right: 8px;
		margin-bottom: 8px;
	}
	#codevzcustommenulist2-2 .codevz-widget-content .col.s6 a {
		font-size: 13px;
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	/* Override center_on_mobile for footer - force left align */
	.page_footer .center_on_mobile,
	.page_footer .center_on_mobile *,
	.page_footer .center_on_mobile h4,
	.page_footer .center_on_mobile .codevz-widget-content {
		text-align: left !important;
	}
	/* Contact Us - left align */
	.sidebar_footer-3,
	.sidebar_footer-3 .widget,
	.sidebar_footer-3 .contact-widget,
	.sidebar_footer-3 .contact-widget p {
		text-align: left !important;
	}
	.cz_middle_footer > .row {
		display: block !important;
	}
	footer .elms_center > div {
		display: block;
	}
	/* Footer widget columns */
	.sidebar_footer-1,
	.sidebar_footer-2,
	.sidebar_footer-3 {
		width: 100% !important;
		text-align: left !important;
	}
	.sidebar_footer-1 .widget,
	.sidebar_footer-2 .widget,
	.sidebar_footer-3 .widget {
		margin-bottom: 25px;
	}
	/* Hide "Connect with us" section above clients on mobile */
	.vc_custom_1554643268612 {
		display: none !important;
	}
	/* Center client logos in carousel when showing 1 slide */
	#clients .slick-track {
		display: flex !important;
		justify-content: center !important;
	}
	#clients .slick-slide {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
	}
	#clients .slick-slide .wpb_single_image,
	#clients .slick-slide .wpb_wrapper,
	#clients .slick-slide .vc_figure,
	#clients .slick-slide .vc_single_image-wrapper {
		display: flex !important;
		justify-content: center !important;
	}
	#clients .slick-slide img {
		margin: 0 auto !important;
		display: block !important;
	}
	/* Footer menu items left-aligned */
	.page_footer .widget_nav_menu ul,
	.page_footer .codevz-widget-custom-menu ul,
	.page_footer .menu {
		text-align: left !important;
		padding-left: 0;
		list-style: none;
	}
	.page_footer .widget_nav_menu li a,
	.page_footer .codevz-widget-custom-menu li a {
		text-align: left !important;
		display: block;
		padding: 5px 0;
	}

	/* --- Typography scaling --- */
	h1, .h1 { font-size: 1.75rem !important; }
	h2, .h2 { font-size: 1.5rem !important; }
	h3, .h3 { font-size: 1.25rem !important; }

	/* --- Fixed elements --- */
	.cz_fixed_ad {
		display: none !important;
	}
	.Corpse_Sticky {
		display: none !important;
	}
	.cz_fixed_footer {
		position: static !important;
	}

	/* --- Posts grid --- */
	.cz_posts_container article > div {
		height: auto !important;
	}

	/* --- WPBakery row stretch --- */
	.vc_row[data-vc-full-width] {
		overflow: hidden !important;
	}

	/* --- Empty space elements reduce --- */
	.vc_empty_space {
		height: 15px !important;
	}

	/* --- Parallax backgrounds --- */
	.vc_parallax .vc_parallax-inner {
		background-attachment: scroll !important;
	}

	/* --- Iframes / embeds --- */
	iframe,
	embed,
	object,
	video {
		max-width: 100% !important;
	}
}

/* =============================================
   MOBILE RESPONSIVE (max-width: 480px)
   ============================================= */
@media screen and (max-width: 480px) {

	/* --- Typography further scaling --- */
	body {
		font-size: 14px;
	}
	h1, .h1 { font-size: 1.5rem !important; }
	h2, .h2 { font-size: 1.3rem !important; }
	h3, .h3 { font-size: 1.1rem !important; }
	h4, .h4 { font-size: 1rem !important; }

	/* Override WPBakery inline font sizes more aggressively */
	.vc_custom_heading h3[style*="font-size"] {
		font-size: 20px !important;
	}
	.vc_custom_heading h4[style*="font-size"] {
		font-size: 18px !important;
	}
	.vc_custom_heading p[style*="font-size"] {
		font-size: 14px !important;
		line-height: 1.5 !important;
	}

	/* --- Buttons --- */
	.cz_btn,
	.woocommerce .button,
	.button,
	.vc_btn3,
	input[type="submit"] {
		font-size: 13px !important;
		padding: 8px 16px !important;
		white-space: normal !important;
	}

	/* --- Table overflow --- */
	table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* --- Gap adjustments --- */
	.page_content {
		margin: 20px 0 !important;
	}
	.widget {
		margin-bottom: 30px;
	}

	/* --- Search full width --- */
	.search_style_icon_full .search {
		width: 90% !important;
	}

	/* --- Info box stack --- */
	.cz_elm_info_box {
		flex-direction: column;
		text-align: center;
	}
	.cz_info_content {
		margin: 10px 0 0 0;
	}

	/* --- Inner row columns extra spacing --- */
	.vc_row-has-fill .vc_column-inner {
		padding: 15px !important;
	}

	/* --- Support section text --- */
	.vc_column_text p[style*="text-align: justify"] {
		text-align: left !important;
	}

	/* --- Stylish list items --- */
	.cz_stl li {
		font-size: 14px !important;
	}
}

/* Hide mobile menu button on desktop */
#cz_mobile_menu_btn {
	display: none;
}