/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/


/* =============================================================
   BRAND COLORS — Alamo Public Safety Consulting
   Primary Blue : #204da8
   Light Gray   : #f5f5f5
   Mid Gray     : #e6e6e6
   Footer Black : #000000
   ============================================================= */

:root {
	--cnvs-themecolor: #204da8;
}


/* ----- Content Wrap --------------------------------------- */
.content-wrap {
	padding-bottom: 0;
}


/* ----- Top Bar --------------------------------------------- */
#top-bar {
	background-color: #ffffff;
	border-bottom: 1px solid #e8e8e8;
}

#top-bar p,
#top-bar a {
	color: #333333;
	font-size: 13px;
}

#top-bar a {
	color: #2f59ae;
}

#top-bar a:hover {
	color: #204da8;
}


/* ----- Header ---------------------------------------------- */
#header {
	background-color: #ffffff;
}

#header .header-misc p {
	font-size: 13px;
	line-height: 1.4;
	color: #333333;
}


/* ----- Navigation ------------------------------------------ */
.primary-menu > ul > li > a > div {
	letter-spacing: 0.5px;
}


/* ----- CTA Banner ------------------------------------------ */
.section-cta {
	background-color: #204da8 !important;
}


/* ----- About Section --------------------------------------- */
.section-about {
	background-color: #e6e6e6;
}


/* ----- Core Solutions -------------------------------------- */
.section-core {
	background-color: #ffffff;
}

/* Equal-height description paragraphs across the three boxes */
.section-core .col-sm-6 {
	display: flex;
}

.section-core .feature-box {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.section-core .fbox-content {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.section-core .fbox-content p:first-of-type {
	flex: 1;
}

/* Core solutions "Learn More" outline buttons */
.section-core .fbox-content .button-border {
	border-color: #333333;
	color: #333333;
}

.section-core .fbox-content .button-border:hover {
	background-color: #333333;
	color: #ffffff;
}


/* ----- OC Images Carousel ---------------------------------- */
#oc-images h2 {
	line-height: normal;
}

#oc-images h2 a,
#oc-images h2 a:hover {
	color: #ffffff;
}


/* ----- Featured Services ----------------------------------- */
#section-services {
	background-color: #f5f5f5;
}

/* Service box headings */
#section-services .fbox-content h3 a {
	color: #222222;
}

#section-services .fbox-content h3 a:hover {
	color: #204da8;
}


/* ----- Footer ---------------------------------------------- */
#footer.dark {
	background-color: #000000;
}

#footer.dark .widget h4,
#footer.dark .widget h5 {
	color: #ffffff;
}

#footer.dark .widget p,
#footer.dark .widget address,
#footer.dark .widget abbr {
	color: #cccccc;
}

#footer.dark .widget_links ul li a {
	color: #a3cfff;
}

#footer.dark .widget_links ul li a:hover {
	color: #ffffff;
}

#footer.dark .subscribe-widget .btn-success {
	background-color: #204da8;
	border-color: #204da8;
}

#footer.dark .subscribe-widget .btn-success:hover {
	background-color: #1a3f8a;
	border-color: #1a3f8a;
}


/* ----- Breadcrumbs ----------------------------------------- */
/* SSI includes emit <li> without .breadcrumb-item; mirror Bootstrap's rules */
ol.breadcrumb > li + li {
	padding-left: var(--bs-breadcrumb-item-padding-x);
}
ol.breadcrumb > li + li::before {
	float: left;
	padding-right: var(--bs-breadcrumb-item-padding-x);
	color: var(--bs-breadcrumb-divider-color);
	content: var(--bs-breadcrumb-divider, "/");
}


/* ----- Copyright Bar --------------------------------------- */
#copyrights,
.dark #copyrights,
#copyrights.dark {
	background-color: #204da8;
	color: #ffffff;
}

#copyrights a {
	color: rgba(255, 255, 255, 0.85);
}

#copyrights a:hover {
	color: #ffffff;
}

#copyrights .social-icon {
	border-color: rgba(255, 255, 255, 0.3) !important;
	color: #ffffff !important;
}

#copyrights .social-icon:hover {
	background-color: rgba(255, 255, 255, 0.2) !important;
}


.cta {
    background: #000;
    color: #fff;
}
.cta h2{
    color: #fff;
    margin-bottom: 10px;
}
.cta p {
    margin-bottom: 10px;
}

#secondary {
	padding-bottom: 40px;
}

.fslider .slide > a > img {
  max-height: 950px;
  width: auto;
  margin: 0 auto;
  display: block;
}

#secondary ul {
	margin-left: 30px;
}


/* row gap for wrapped .oiw-row grids */
.oiw-row {
	row-gap: 30px;
}

/* The .oiw-grid cards (replaced by JS into col-sm-6/col-md-4 grid
   items) carry a fixed width="370" image and a stray "col-xs-12"
   class that Bootstrap 5 doesn't recognise, so on phones the column
   gets no side padding: the image sits left at 370px with dead space
   on the right, and at the 3-across tablet size the 370px image
   overflows its narrow column. Give the columns gutters and let the
   image fill the column width so it scales correctly at every size. */
#secondary .oiw-row .grid {
	padding-left: 15px;
	padding-right: 15px;
}
#secondary .oiw-row .grid figure {
	margin: 0;
}
#secondary .oiw-row .grid figure img {
	display: block;
	width: 100%;
	height: auto;
}


/* ----- Landing Page Cards ---------------------------------- */
.services-classic img {
	width: 100%;
	height: auto;
}

#secondary ol {
	margin-left: 30px;
}


/* ----- Mobile Horizontal-Scroll Fix ------------------------- */
/* Below 576px the .container is full-width with only 12px side
   padding, but several wide-gutter rows use larger negative side
   margins, so the row spills past the viewport edge and creates a
   horizontal scrollbar. The footer (.row.g-5, a shared include)
   overflows by 12px on every page; .oiw-row (-15px) and
   .row.gutter-30..70 overflow on interior pages. Clamp the gutter
   to the container padding on mobile only — desktop (>=576px, where
   the container is centered with room to spare) is unaffected, and
   the vertical (gutter-y) spacing between stacked columns is kept. */
@media (max-width: 575.98px) {
	/* Bootstrap gutter rows (footer uses g-5) */
	.row.g-5,
	.row.gx-5 {
		--bs-gutter-x: 1.5rem;
	}

	/* Theme custom-gutter + oiw grid rows */
	.oiw-row,
	.row.gutter-30,
	.row.gutter-40,
	.row.gutter-50,
	.row.gutter-60,
	.row.gutter-70 {
		margin-right: -12px;
		margin-left: -12px;
	}
}

/* ----- Home Hero Carousel — heading clipped on mobile -------- */
/* Below the lg breakpoint the carousel collapses to a single
   full-width item (data-items-xs="1"). The owl images keep their
   wide aspect ratio, so each slide is short, while the heading wraps
   to 2-3 lines. The caption lives in .text-overlay-mask, pinned to
   the bottom of .bg-overlay (overflow:hidden), so the extra text
   overflows ABOVE the image and the top of the heading is clipped.
   Give the slide a taller fixed height on mobile and tighten the
   heading so the full caption fits. Desktop (>=992px) is untouched. */
@media (max-width: 991.98px) {
	#oc-images .oc-item,
	#oc-images .oc-item img {
		height: 420px !important;
	}

	#oc-images .text-overlay-mask .portfolio-desc h2 {
		font-size: 1.25rem;
		line-height: 1.35;
	}
}

/* ----- "Talk to an Expert" dark button — white hover --------- */
/* The theme's default .button-dark:hover swaps to the accent
   background. Opt this button into a white-background hover with
   dark text/border so it reads as an outline on hover. Scoped to
   the .button-hover-white class so other dark buttons are unaffected. */
.button.button-dark.button-hover-white:hover {
	background-color: #fff;
	color: var(--cnvs-btn-color-dark);
	box-shadow: inset 0 0 0 1px var(--cnvs-btn-color-dark);
}


#oiw-accessory .toggle {
	margin-bottom: 0px;
}

#secondary .section {
	background-color: transparent;
}