/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* ------------------------------------------------------------------
 * About Slider widget - two column layout (slider + content)
 *
 * Selectors are scoped with .elementor-widget-container so they outrank
 * the theme's single-class rules and Elementor's own frontend.min.css,
 * which loads after this file.
 * ---------------------------------------------------------------- */

.elementor-widget-container .al-about-row,
.al-about-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 30px;
	width: 100%;
}

.elementor-widget-container .al-about-row > .al-about-media,
.elementor-widget-container .al-about-row > .al-about-text {
	min-width: 0;
	box-sizing: border-box;
}

.elementor-widget-container .al-about-row > .al-about-media {
	flex: 0 0 calc(50% - 15px);
	max-width: calc(50% - 15px);
}

.elementor-widget-container .al-about-row > .al-about-text {
	flex: 1 1 0%;
	max-width: 100%;
}

/* Image on the right: flip the visual order, keep DOM order for a11y. */
.elementor-widget-container .al-about-row.al-about-image-right > .al-about-media {
	order: 2;
}

.elementor-widget-container .al-about-row.al-about-image-right > .al-about-text {
	order: 1;
}

/*
 * The theme gives .al-about-wrap a fixed 50px left padding and a 552px
 * max-width, which assumes the WPBakery column. Inside the widget the column
 * width is already controlled by .al-about-media, so let the slider fill it.
 */
.elementor-widget-container .al-about-row .al-about-wrap {
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.elementor-widget-container .al-about-row.al-about-image-right .al-about-wrap {
	padding: 0 50px 0 0;
}

.elementor-widget-container .al-about-content > *:last-child {
	margin-bottom: 0;
}

.elementor-widget-container .al-about-desc {
	margin-bottom: 25px;
}

.elementor-widget-container .al-about-content .al-btn-wrap {
	margin-bottom: 40px;
}

/* Stack the two columns on tablet and below. */
@media (max-width: 991px) {

	.elementor-widget-container .al-about-row > .al-about-media,
	.elementor-widget-container .al-about-row > .al-about-text {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.elementor-widget-container .al-about-row.al-about-image-right > .al-about-media,
	.elementor-widget-container .al-about-row.al-about-image-right > .al-about-text {
		order: 0;
	}

	.elementor-widget-container .al-about-row .al-about-wrap,
	.elementor-widget-container .al-about-row.al-about-image-right .al-about-wrap {
		padding-left: 0;
		padding-right: 0;
	}
}

/* ------------------------------------------------------------------
 * Testimonial Slider widget - round avatars
 *
 * Elementor's `.elementor img` reset (border: none; border-radius: 0;
 * box-shadow: none) has the same specificity as the theme's avatar rules
 * and loads later, so the avatars turned square. Restore the theme look.
 * ---------------------------------------------------------------- */

.elementor .as-customer-slider .as-customer-img img {
	border-radius: 100%;
	border: 5px solid rgb(255, 255, 255);
	box-shadow: -2px 0px 13px 0px rgba(0, 0, 0, 0.13);
	width: 100%;
}

.elementor .as-customer-slider .as-customer-img.slick-slide.slick-current img {
	border-color: var(--al-primary-color);
}

.elementor .ast-testimonials-slider .ast-testimonials-slider-box img {
	border-radius: 100%;
	border: 5px solid var(--al-border-color);
}