/* ==========================================================================
   /frequently-asked-questions/ — page-specific styles.
   Numbers come from baseline/css/inline/frequently-asked-questions__elementor-
   frontend-inline-css.css (the .elementor-188 block) + the Elementor accordion
   defaults in baseline/css/qlba377t-4hw4h.css. Breakpoints: 1024 / 767.
   ========================================================================== */

/* --------------------------------------------------- Elementor "slides" banner
   200px band, cover image, 25% black overlay, centred contents at 66% width.
   (Shared shape with /pricing/ — see report: promotion note.) */
.page-hero {
	position: relative;
	overflow: hidden;
	margin-bottom: 30px;
}
.page-hero__bg {
	position: absolute;
	inset: 0;
	background-color: #833ca3;
	background-image: url(/wp-content/uploads/2018/04/sms-gateway-banner-2.jpg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}
.page-hero__overlay { position: absolute; inset: 0; background-color: rgba(0, 0, 0, .25); }
.page-hero__inner {
	position: relative;
	height: 200px;
	padding: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
}
.page-hero__contents { max-width: 66%; }
.page-hero__heading { font-size: 35px; font-weight: 700; line-height: 1; margin-bottom: 20px; }
.page-hero__description { font-size: 17px; line-height: 1.4; }

/* ---------------------------------------------------------- questions block */
.faq-main { margin-bottom: 40px; }
.faq-main > .container { max-width: 900px; }
/* Elementor stacks widgets as flex items inside `.elementor-widget-wrap`, so
   adjacent widget margins never collapse and a widget's own inner margins stay
   inside it. */
.faq-main .col { display: flex; flex-direction: column; align-items: stretch; }
.faq-main__lead { margin-bottom: 20px; }   /* Elementor widget spacing */
.faq-main__lead p { margin: 0 0 1.5em; }

/* Elementor accordion skin for this page: #eaeaea title bar, #efefef hairlines,
   semibold titles, 14px body copy, plus/minus icons in a 1.5em gutter. */
.faq-main .accordion { margin-bottom: 0; }
.faq-main .accordion__item { border-color: #efefef; }
/* Elementor floats the icon, so only the first line of a wrapped title is
   indented — keep the block/float layout rather than the shared flex row. */
.faq-main .accordion__title { display: block; font-weight: 600; font-size: 17px; background-color: #eaeaea; }
.faq-main .accordion__icon { float: left; display: inline-block; width: 1.5em; margin-right: 0; text-align: left; }
.faq-main .accordion__icon svg { width: 1em; height: 1em; }
.faq-main .accordion__content { border-top-color: #efefef; font-size: 14px; }

/* ---------------------------------------------------------- breakpoints */
@media (max-width: 767px) {
	.page-hero__inner { padding: 30px; }
	.page-hero__heading { font-size: 23px; margin-bottom: 20px; }
	/* Elementor's mobile slide defaults give the description a 15px bottom margin,
	   which lifts the centred block by ~7px. */
	.page-hero__description { font-size: 13px; margin-bottom: 15px; }

	.faq-main .accordion__title { padding: 12px 15px; }
	.faq-main .accordion__label { font-size: 14px; line-height: 23px; }
	.faq-main .accordion__icon { width: 1.2em; }
	.faq-main .accordion__content { padding: 7px 15px; }
}