/* ==========================================================================
   Carousel / Loop compatibility layer
   --------------------------------------------------------------------------
   The Unlimited Elements + Owl Carousel widgets that used to power these
   sliders were converted to native Elementor / Elementor Pro widgets. The
   converter kept the OLD Owl wrapper class (reviews-slider, services-slider,
   services-slider-nav, insurance-slider, locations-slider, portfolio-listing,
   etc.) as an extra CSS class on the new widget's `.elementor-widget-*`
   element, but the INSIDE markup is completely different now (Swiper instead
   of Owl Carousel). The legacy rules in style.css therefore target elements
   that no longer exist and have no visual effect any more.

   This file re-targets the same design intent (colors, sizes, radii,
   paddings, arrow styling) at the real markup Elementor Pro renders, scoped
   under the legacy wrapper classes so nothing leaks onto other carousels.

   Source of the "old" values: wp-content/themes/hello-elementor-child/assets/css/style.css
   (verbatim compiled copy of the archived JupiterX child theme's style.scss).

   New markup reference (read directly from the plugin files):
   - wp-content/plugins/elementor-pro/modules/carousel/widgets/base.php
     (.elementor-swiper > .elementor-main-swiper.swiper > .swiper-wrapper > .swiper-slide,
      arrows: .elementor-swiper-button.elementor-swiper-button-prev/-next (icon = eicon svg),
      pagination: .swiper-pagination)
   - .../carousel/widgets/reviews.php
     (.elementor-testimonial > .elementor-testimonial__header (a|div) >
        .elementor-testimonial__image > img,
        cite.elementor-testimonial__cite > .elementor-testimonial__name +
          .elementor-star-rating (i.elementor-star-full/-empty/-N) + .elementor-testimonial__title
      > .elementor-testimonial__content > .elementor-testimonial__text)
   - .../carousel/widgets/testimonial-carousel.php
     (.elementor-testimonial > .elementor-testimonial__content > .elementor-testimonial__text
        (+ cite when layout = image_above/left/right)
      > .elementor-testimonial__footer > .elementor-testimonial__image > img +
        cite.elementor-testimonial__cite > .elementor-testimonial__name + .elementor-testimonial__title)
   - .../modules/loop-builder/documents/loop.php (item wrapper: .e-loop-item)
     + .../loop-builder/widgets/loop-carousel.php (arrows/pagination: same
       .elementor-swiper-button-prev/-next + .swiper-pagination as above)

   Sections translated in this file:
     1. .reviews-slider           ucaddon_reviews_slider      -> Reviews widget
     2. .reviews-slider-new       ucaddon_reviews_slider (copy)-> Reviews widget
     3. .services-slider-nav      ucaddon_services_slider_copy-> Testimonial Carousel
     4. .services-slider          ucaddon_services_slider     -> Testimonial Carousel
     5. .insurance-slider         ucaddon_insurance_slider    -> Testimonial Carousel
     6. .locations-slider         jet-listing-grid (slider)   -> Loop Carousel
     7. .portfolio-listing        jet-listing-grid (slider)   -> Loop Carousel (arrows only)

   Items checked but NOT translated here (see final report for why):
     - jet-carousel (trust-badge logos / Image Carousel): no old rules exist
       targeting `.jet-carousel` anywhere in style.css, so there is nothing to
       migrate.
     - .services-slider / .services-slider-nav "<a>" read-more link + icon
       hover-rotation rules: the Testimonial Carousel widget has no per-slide
       link, so there is no element to attach this to.
     - .slider-arrows / .elementor-loop-container__slider-icon (generic,
       + the .page-id-1346 / .page-id-1072 overrides): ambiguous - could be
       the loop carousel's own arrows, or a manually placed nav element with a
       hand-typed class. Left alone pending a look at the live page markup.
     - .new-service / .number-slider: not one of the six widgets covered by
       this migration (they style `.uc_classic_carousel_content` /
       `.ue-carousel-item`, a different Unlimited Elements carousel). Left
       alone.
     - .services-listing, .blog-listing, .location-listing-heading: already
       correctly targeting `.e-loop-item` / are custom widget-level classes
       unaffected by the conversion. No change needed.
   ========================================================================== */


/* ==========================================================================
   1. .reviews-slider  ->  Elementor Pro "Reviews" widget (.elementor-widget-reviews)
   Old: .owl-carousel.owl-theme.reviews-slider > .item > .author-box >
        img.author-img + .author-info > h4(name) + img.author-rating, then <p> (review text)
   ========================================================================== */

/* Neutralize Elementor's own default slide card (border/bg/padding) - the
   real "card" look is applied to .elementor-testimonial below, same as the
   old .item card sat inside a bare .owl-item. */
.reviews-slider .swiper-slide {
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
}

/* Old: .reviews-slider .item { border-radius:19px; background:#FFF; padding:50px; border:1px solid rgba(0,0,0,.025) } */
.reviews-slider .elementor-testimonial {
	border-radius: 19px;
	background: #FFF;
	padding: 50px;
	border: 1px solid rgba(0, 0, 0, 0.025);
}
@media (min-width: 992px) and (max-width: 1036px) { .reviews-slider .elementor-testimonial { padding: 20px; } }
@media (min-width: 768px) and (max-width: 991px)  { .reviews-slider .elementor-testimonial { padding: 20px; } }
@media (min-width: 200px) and (max-width: 767px)  { .reviews-slider .elementor-testimonial { padding: 20px; } }

/* Old: .author-box { display:flex } -> new header row (image + cite) */
.reviews-slider .elementor-testimonial__header {
	display: flex;
	padding: 0;
	border: none;
}

/* Old: .author-box .author-img { width:100px;height:100px;margin-right:20px } */
.reviews-slider .elementor-testimonial__image {
	margin-right: 20px;
}
.reviews-slider .elementor-testimonial__image img {
	width: 100px;
	height: 100px;
}
@media (min-width: 992px) and (max-width: 1036px) { .reviews-slider .elementor-testimonial__image img { width: 70px; height: 70px; } }
@media (min-width: 768px) and (max-width: 991px)  { .reviews-slider .elementor-testimonial__image img { width: 70px; height: 70px; } }
@media (min-width: 200px) and (max-width: 767px)  { .reviews-slider .elementor-testimonial__image img { width: 60px; height: 60px; } }

/* Old: .author-box .author-info { display:flex; flex-direction:column; justify-content:center } */
.reviews-slider .elementor-testimonial__cite {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Old: .author-info img (the author-rating 5-star image) { max-width:130px / 100px / 80px / 70px }
   New widget renders 5 real star icons (.elementor-star-rating i.elementor-star-full/-empty) instead
   of one image, so translate the old image width into a comparable star size + tight spacing.
   No explicit brand color existed for the old rating (it was a flat PNG), so use a standard
   gold/amber star color as requested. */
.reviews-slider .elementor-star-rating {
	color: #FFB800;
	font-size: 24px;
}
.reviews-slider .elementor-star-rating i:before { color: #FFB800 !important; }
.reviews-slider .elementor-star-rating i:not(:last-of-type) { margin-inline-end: 2px; }
@media (min-width: 992px) and (max-width: 1036px) { .reviews-slider .elementor-star-rating { font-size: 18px; } }
@media (min-width: 768px) and (max-width: 991px)  { .reviews-slider .elementor-star-rating { font-size: 14px; } }
@media (min-width: 200px) and (max-width: 767px)  { .reviews-slider .elementor-star-rating { font-size: 12px; } }

/* Old: .reviews-slider .item p { margin-top:40px; color:#151313; font-size:18px } (the review text) */
.reviews-slider .elementor-testimonial__content { padding: 0; }
.reviews-slider .elementor-testimonial__text {
	margin-top: 40px;
	color: #151313;
	font-size: 18px;
	font-style: normal;
}
@media (min-width: 992px) and (max-width: 1036px) { .reviews-slider .elementor-testimonial__text { margin-top: 20px; } }
@media (min-width: 768px) and (max-width: 991px)  { .reviews-slider .elementor-testimonial__text { margin-top: 20px; } }
@media (min-width: 200px) and (max-width: 767px)  { .reviews-slider .elementor-testimonial__text { margin-top: 20px; } }

/* Old: .reviews-slider .owl-nav { display:flex; justify-content:end; position:absolute; top:-110px; width:100% }
   button img { height:60px;width:60px;border:1px solid #DCDCDC;border-radius:50%;padding:18px }
   button img:hover { background:black; filter:brightness(20); border:none }
   button.owl-prev img { margin-right:20px }
   The new arrows are two independent, already-absolutely-positioned elements (no flex wrapper),
   so each is positioned individually to reproduce the same "pair sitting above the carousel,
   flush right" layout. !important is needed because Elementor's own
   `.elementor-swiper-button{position:absolute;top:50%}` base rule would otherwise win. */
.reviews-slider .elementor-swiper-button-prev,
.reviews-slider .elementor-swiper-button-next {
	outline: none;
	position: absolute !important;
	top: -110px !important;
	bottom: auto !important;
	height: 60px;
	width: 60px;
	border: 1px solid #DCDCDC;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #151313;
	font-size: 22px;
	transform: none !important;
}
.reviews-slider .elementor-swiper-button-next { left: auto !important; right: 0 !important; }
.reviews-slider .elementor-swiper-button-prev { left: auto !important; right: 80px !important; } /* 60px button + 20px gap, mirrors old owl-prev img margin-right:20px */
.reviews-slider .elementor-swiper-button-prev:hover,
.reviews-slider .elementor-swiper-button-next:hover {
	background: black;
	color: #fff;
	border-color: black;
}
.reviews-slider .elementor-swiper-button-prev:hover svg,
.reviews-slider .elementor-swiper-button-next:hover svg { fill: #fff; }
@media (min-width: 200px) and (max-width: 767px) {
	.reviews-slider .elementor-swiper-button-prev,
	.reviews-slider .elementor-swiper-button-next {
		top: auto !important;
		bottom: -60px !important;
		height: 40px;
		width: 40px;
	}
	.reviews-slider .elementor-swiper-button-next { right: 50% !important; transform: translateX(50%) !important; }
	.reviews-slider .elementor-swiper-button-prev { right: 50% !important; transform: translateX(calc(50% + 50px)) !important; }
}


/* ==========================================================================
   2. .reviews-slider-new  ->  Reviews widget (2nd copy of the widget, "reviews-slider-new" variant)
   Old: same .item / .author-box structure as above, but content wrapped in
        .content (not a bare <p>), plus a decorative quote-icon :after on the card
        and dark (not grey) nav-button borders using an <i> icon instead of <img>.
   ========================================================================== */

.reviews-slider-new .swiper-slide {
	background: none;
	border: none;
	border-radius: 0;
	padding: 0;
}

/* Old: .reviews-slider-new .item { border-radius:19px; background:#FFF; padding:50px; border:1px solid rgba(0,0,0,.025) } */
.reviews-slider-new .elementor-testimonial {
	position: relative;
	border-radius: 19px;
	background: #FFF;
	padding: 50px;
	border: 1px solid rgba(0, 0, 0, 0.025);
}
@media (min-width: 992px) and (max-width: 1036px) { .reviews-slider-new .elementor-testimonial { padding: 20px; } }
@media (min-width: 768px) and (max-width: 991px)  { .reviews-slider-new .elementor-testimonial { padding: 20px; } }
@media (min-width: 200px) and (max-width: 767px)  { .reviews-slider-new .elementor-testimonial { padding: 20px; } }

/* Old: .item:after { decorative quote icon, top-right of the card } */
.reviews-slider-new .elementor-testimonial:after {
	content: "";
	height: 60px;
	width: 60px;
	position: absolute;
	background: url(/wp-content/uploads/2024/08/Group-26.webp);
	top: 50px;
	right: 50px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
@media (min-width: 992px) and (max-width: 1036px) { .reviews-slider-new .elementor-testimonial:after { top: 20px; right: 20px; height: 50px; width: 50px; } }
@media (min-width: 768px) and (max-width: 991px)  { .reviews-slider-new .elementor-testimonial:after { top: 20px; right: 20px; height: 50px; width: 50px; } }
@media (min-width: 200px) and (max-width: 767px)  { .reviews-slider-new .elementor-testimonial:after { top: 20px; right: 20px; height: 40px; width: 40px; } }

.reviews-slider-new .elementor-testimonial__header {
	display: flex;
	padding: 0;
	border: none;
}
.reviews-slider-new .elementor-testimonial__image { margin-right: 20px; }
.reviews-slider-new .elementor-testimonial__image img {
	width: 100px;
	height: 100px;
}
@media (min-width: 992px) and (max-width: 1036px) { .reviews-slider-new .elementor-testimonial__image img { width: 70px; height: 70px; } }
@media (min-width: 768px) and (max-width: 991px)  { .reviews-slider-new .elementor-testimonial__image img { width: 70px; height: 70px; } }
@media (min-width: 200px) and (max-width: 767px)  { .reviews-slider-new .elementor-testimonial__image img { width: 60px; height: 60px; } }

.reviews-slider-new .elementor-testimonial__cite {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.reviews-slider-new .elementor-star-rating {
	color: #FFB800;
	font-size: 24px;
}
.reviews-slider-new .elementor-star-rating i:before { color: #FFB800 !important; }
.reviews-slider-new .elementor-star-rating i:not(:last-of-type) { margin-inline-end: 2px; }
@media (min-width: 992px) and (max-width: 1036px) { .reviews-slider-new .elementor-star-rating { font-size: 18px; } }
@media (min-width: 768px) and (max-width: 991px)  { .reviews-slider-new .elementor-star-rating { font-size: 14px; } }
@media (min-width: 200px) and (max-width: 767px)  { .reviews-slider-new .elementor-star-rating { font-size: 12px; } }

/* Old: .reviews-slider-new .item .content { max-width:1054.005px; font-family:"Satoshi",sans-serif; margin-top:40px; color:#151313; font-weight:400 } */
.reviews-slider-new .elementor-testimonial__content { padding: 0; }
.reviews-slider-new .elementor-testimonial__text {
	max-width: 1054.005px;
	font-family: "Satoshi", Sans-serif;
	margin-top: 40px;
	color: #151313;
	font-weight: 400;
	font-style: normal;
}
@media (min-width: 992px) and (max-width: 1036px) { .reviews-slider-new .elementor-testimonial__text { margin-top: 20px; } }
@media (min-width: 768px) and (max-width: 991px)  { .reviews-slider-new .elementor-testimonial__text { margin-top: 20px; } }
@media (min-width: 200px) and (max-width: 767px)  { .reviews-slider-new .elementor-testimonial__text { margin-top: 20px; } }
/* Old: .reviews-slider-new .item .content strong { text-decoration:underline } - <strong> markup is
   preserved verbatim inside the rich-text review content, so this still applies as-is. */
.reviews-slider-new .elementor-testimonial__text strong { text-decoration: underline; }

/* Old: .owl-nav button i { height:60px;width:60px;border:1px solid black;border-radius:50% }
        button i:hover { background:black;color:white }
        button.owl-prev i { margin-right:20px }
   (this variant already used an <i> icon instead of an <img>, so the translation is almost 1:1) */
.reviews-slider-new .elementor-swiper-button-prev,
.reviews-slider-new .elementor-swiper-button-next {
	outline: none;
	position: absolute !important;
	top: -110px !important;
	bottom: auto !important;
	height: 60px;
	width: 60px;
	border: 1px solid black;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #000;
	font-size: 22px;
	transform: none !important;
}
.reviews-slider-new .elementor-swiper-button-next { left: auto !important; right: 0 !important; }
.reviews-slider-new .elementor-swiper-button-prev { left: auto !important; right: 80px !important; }
.reviews-slider-new .elementor-swiper-button-prev:hover,
.reviews-slider-new .elementor-swiper-button-next:hover {
	background: black;
	color: #fff;
}
.reviews-slider-new .elementor-swiper-button-prev:hover svg,
.reviews-slider-new .elementor-swiper-button-next:hover svg { fill: #fff; }
@media (min-width: 200px) and (max-width: 767px) {
	.reviews-slider-new .elementor-swiper-button-prev,
	.reviews-slider-new .elementor-swiper-button-next {
		top: auto !important;
		bottom: -60px !important;
		height: 40px;
		width: 40px;
	}
	.reviews-slider-new .elementor-swiper-button-next { right: 50% !important; transform: translateX(50%) !important; }
	.reviews-slider-new .elementor-swiper-button-prev { right: 50% !important; transform: translateX(calc(50% + 50px)) !important; }
}


/* ==========================================================================
   3. .services-slider-nav  ->  Elementor Pro "Testimonial Carousel" widget
      (.elementor-widget-testimonial-carousel)
   Old: .owl-carousel.services-slider-nav > .owl-stage > .item > h4.counter +
        h4.title + p + a(read-more, removed in the new widget)
   Field mapping used by the converter: slide_number -> __title, title -> __name,
   description -> __text.
   ========================================================================== */

/* Old: .owl-stage { padding-top:100px; padding-bottom:150px } - the sliding track itself
   (equivalent of Owl's .owl-stage is Swiper's .swiper-wrapper). */
.services-slider-nav .swiper-wrapper {
	padding-top: 100px;
	padding-bottom: 150px;
}

/* Reset Elementor's default 20px slide padding - the real card look goes on .elementor-testimonial,
   just like the old card look lived on .item, not on the bare .owl-item. */
.services-slider-nav .swiper-slide { padding: 0; }

/* Old: .owl-stage .item { border-radius:19px; background:#FFF; box-shadow:17px 22px 147px 0 rgba(0,0,0,.05); padding:40px; height:340px } */
.services-slider-nav .elementor-testimonial {
	border-radius: 19px;
	background: #FFF;
	box-shadow: 17px 22px 147px 0px rgba(0, 0, 0, 0.05);
	padding: 40px;
	height: 340px;
}
@media (min-width: 1601px) and (max-width: 1900px) { .services-slider-nav .elementor-testimonial { padding: 30px; } }
@media (min-width: 1401px) and (max-width: 1600px) { .services-slider-nav .elementor-testimonial { padding: 25px; } }
@media (min-width: 1200px) and (max-width: 1400px) { .services-slider-nav .elementor-testimonial { padding: 20px; } }
@media (min-width: 992px) and (max-width: 1036px)  { .services-slider-nav .elementor-testimonial { padding: 20px; } }
@media (min-width: 768px) and (max-width: 991px)   { .services-slider-nav .elementor-testimonial { padding: 20px; } }
@media (min-width: 200px) and (max-width: 767px)   { .services-slider-nav .elementor-testimonial { padding: 20px; } }

/* Old: .owl-stage .item .title { font-size: ... } - the repeater's "title" field (h4.title),
   which the converter mapped to Elementor's __name field/class, NOT __title. */
.services-slider-nav .elementor-testimonial__name { font-weight: 700; }
@media (min-width: 1601px) and (max-width: 1900px) { .services-slider-nav .elementor-testimonial__name { font-size: 25px; } }
@media (min-width: 1401px) and (max-width: 1600px) { .services-slider-nav .elementor-testimonial__name { font-size: 21px; } }
@media (min-width: 1200px) and (max-width: 1400px) { .services-slider-nav .elementor-testimonial__name { font-size: 18px; } }
@media (min-width: 992px) and (max-width: 1036px)  { .services-slider-nav .elementor-testimonial__name { font-size: 18px; } }
@media (min-width: 768px) and (max-width: 991px)   { .services-slider-nav .elementor-testimonial__name { font-size: 17px; } }
@media (min-width: 200px) and (max-width: 767px)   { .services-slider-nav .elementor-testimonial__name { font-size: 16px; } }

/* NOTE: old rules for `.owl-stage .item a` / `a img` (the read-more link + icon that rotated/
   went black on hover) have NO equivalent here - the Testimonial Carousel widget does not
   render a per-slide link at all, so there is nothing in the new markup to attach this to. */

/* Old: .owl-nav { position:absolute; top:-71px; width:100%; max-width:1639px; left:0; right:0;
   margin:auto; padding:0 20px; display:flex; justify-content:end }
   button { outline:none; border:none } / button.owl-prev { margin-right:20px }
   button i { height:60px; width:60px; border:1px solid #DCDCDC; border-radius:50% }
   button i:hover { background:black; color:white }
   Translated to individually-positioned arrows (Elementor doesn't wrap them in a flex nav bar). */
.services-slider-nav .elementor-swiper-button-prev,
.services-slider-nav .elementor-swiper-button-next {
	outline: none;
	border: 1px solid #DCDCDC;
	position: absolute !important;
	top: -71px !important;
	height: 60px;
	width: 60px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #151313;
	font-size: 22px;
	transform: none !important;
}
.services-slider-nav .elementor-swiper-button-next { left: auto !important; right: 20px !important; }
.services-slider-nav .elementor-swiper-button-prev { left: auto !important; right: 100px !important; } /* next(60)+gap(20)+prev margin-right(20) */
.services-slider-nav .elementor-swiper-button-prev:hover,
.services-slider-nav .elementor-swiper-button-next:hover {
	background: black;
	color: #fff;
}
.services-slider-nav .elementor-swiper-button-prev:hover svg,
.services-slider-nav .elementor-swiper-button-next:hover svg { fill: #fff; }
@media (min-width: 768px) and (max-width: 991px) {
	.services-slider-nav .elementor-swiper-button-prev,
	.services-slider-nav .elementor-swiper-button-next { top: -60px !important; height: 50px; width: 50px; }
	.services-slider-nav .elementor-swiper-button-prev { right: 80px !important; }
}
@media (min-width: 992px) and (max-width: 1036px) {
	.services-slider-nav .elementor-swiper-button-prev { right: 90px !important; }
}
@media (min-width: 200px) and (max-width: 767px) {
	.services-slider-nav .elementor-swiper-button-prev,
	.services-slider-nav .elementor-swiper-button-next {
		top: auto !important;
		bottom: 40px !important;
		height: 50px;
		width: 50px;
	}
	.services-slider-nav .elementor-swiper-button-next { right: 50% !important; transform: translateX(50%) !important; }
	.services-slider-nav .elementor-swiper-button-prev { right: 50% !important; transform: translateX(calc(50% + 60px)) !important; }
}


/* ==========================================================================
   4. .services-slider  ->  Testimonial Carousel (no description/link, just the two headings)
   Old: .owl-carousel.services-slider > .owl-stage > .item > h4.counter + h4.title
   Field mapping: slide_number -> __title, title -> __name (description unused).
   ========================================================================== */

.services-slider .swiper-wrapper {
	padding-top: 100px;
	padding-bottom: 150px;
}
.services-slider .swiper-slide { padding: 0; }

/* Old: .owl-stage .item { border-radius:19px; background:#FFF; box-shadow:17px 22px 147px 0 rgba(0,0,0,.05); padding:40px } */
.services-slider .elementor-testimonial {
	border-radius: 19px;
	background: #FFF;
	box-shadow: 17px 22px 147px 0px rgba(0, 0, 0, 0.05);
	padding: 40px;
}
@media (min-width: 1601px) and (max-width: 1900px) { .services-slider .elementor-testimonial { padding: 30px; } }
@media (min-width: 1401px) and (max-width: 1600px) { .services-slider .elementor-testimonial { padding: 25px; } }
@media (min-width: 1200px) and (max-width: 1400px) { .services-slider .elementor-testimonial { padding: 20px; } }
@media (min-width: 992px) and (max-width: 1036px)  { .services-slider .elementor-testimonial { padding: 20px; } }
@media (min-width: 768px) and (max-width: 991px)   { .services-slider .elementor-testimonial { padding: 20px; } }
@media (min-width: 200px) and (max-width: 767px)   { .services-slider .elementor-testimonial { padding: 20px; } }

/* Old: .owl-stage .item .title { font-size: ... } -> repeater "title" field -> __name */
.services-slider .elementor-testimonial__name { font-weight: 700; }
@media (min-width: 1601px) and (max-width: 1900px) { .services-slider .elementor-testimonial__name { font-size: 25px; } }
@media (min-width: 1401px) and (max-width: 1600px) { .services-slider .elementor-testimonial__name { font-size: 21px; } }
@media (min-width: 1200px) and (max-width: 1400px) { .services-slider .elementor-testimonial__name { font-size: 17px; } }
@media (min-width: 992px) and (max-width: 1036px)  { .services-slider .elementor-testimonial__name { font-size: 17px; } }
@media (min-width: 768px) and (max-width: 991px)   { .services-slider .elementor-testimonial__name { font-size: 17px; } }
@media (min-width: 200px) and (max-width: 767px)   { .services-slider .elementor-testimonial__name { font-size: 16px; } }

/* NOTE: old rules for `.owl-stage .item a` / `a img` (read-more link + icon hover animation) -
   same as services-slider-nav above, not mappable: Testimonial Carousel has no per-slide link.
   NOTE: the old CSS never styled `.services-slider .owl-nav` at all (no custom arrow rule
   existed), so arrows here are intentionally left at Elementor Pro's default styling. */


/* ==========================================================================
   5. .insurance-slider  ->  Testimonial Carousel
   Old: .owl-carousel.insurance-slider > .item > h4.slide-number + h4.slide-title + p
   Field mapping: slide_number -> __title, title -> __name, content -> __text.
   ========================================================================== */

.insurance-slider .swiper-slide { padding: 0; }

/* Old: .insurance-slider .item { border-radius:19px; background:#FFF; padding:50px 40px 30px 40px;
   margin:10px 2px 10px 3px; box-shadow:rgba(99,99,99,.09) 0 2px 11px 0 } */
.insurance-slider .elementor-testimonial {
	border-radius: 19px;
	background: #FFF;
	padding: 50px 40px 30px 40px;
	margin: 10px 2px 10px 3px;
	box-shadow: rgba(99, 99, 99, 0.09) 0px 2px 11px 0px;
}
@media (min-width: 200px) and (max-width: 767px) { .insurance-slider .elementor-testimonial { padding: 30px 30px 20px 30px; } }

/* Old: .item p { color:#151313 } / .item p span { font-weight:700 } - content field -> __text.
   The <span> markup from the original content is preserved verbatim, so it still applies. */
.insurance-slider .elementor-testimonial__content { padding: 0; }
.insurance-slider .elementor-testimonial__text {
	color: #151313;
	font-style: normal;
}
.insurance-slider .elementor-testimonial__text span { font-weight: 700; }

/* Old: .item h4 { margin-bottom:20px } - applies to BOTH old h4s (slide-number + slide-title),
   i.e. both __title and __name in the new widget. */
.insurance-slider .elementor-testimonial__title,
.insurance-slider .elementor-testimonial__name {
	margin-bottom: 20px;
}
/* Old: .item h4.slide-number { color:#3FAA6C } - slide_number field -> __title */
.insurance-slider .elementor-testimonial__title { color: #3FAA6C; }

/* Old: .owl-nav { position:absolute; top:-176px; width:100%; max-width:1639px; left:0; right:0;
   margin:auto; padding:0 20px; display:flex; justify-content:end }
   button.owl-prev { margin-right:20px }
   button i { height:60px; width:60px; border:1px solid #DCDCDC; border-radius:50% }
   button i:hover { background:black; color:white } */
.insurance-slider .elementor-swiper-button-prev,
.insurance-slider .elementor-swiper-button-next {
	outline: none;
	border: 1px solid #DCDCDC;
	position: absolute !important;
	top: -176px !important;
	height: 60px;
	width: 60px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #151313;
	font-size: 22px;
	transform: none !important;
}
.insurance-slider .elementor-swiper-button-next { left: auto !important; right: 20px !important; }
.insurance-slider .elementor-swiper-button-prev { left: auto !important; right: 100px !important; }
.insurance-slider .elementor-swiper-button-prev:hover,
.insurance-slider .elementor-swiper-button-next:hover {
	background: black;
	color: #fff;
}
.insurance-slider .elementor-swiper-button-prev:hover svg,
.insurance-slider .elementor-swiper-button-next:hover svg { fill: #fff; }
@media (min-width: 992px) and (max-width: 1036px) { .insurance-slider .elementor-swiper-button-prev,
	.insurance-slider .elementor-swiper-button-next { top: -178px !important; } }
@media (min-width: 768px) and (max-width: 991px) {
	.insurance-slider .elementor-swiper-button-prev,
	.insurance-slider .elementor-swiper-button-next { top: -175px !important; height: 50px; width: 50px; }
	.insurance-slider .elementor-swiper-button-prev { right: 90px !important; }
}
@media (min-width: 200px) and (max-width: 767px) {
	.insurance-slider .elementor-swiper-button-prev,
	.insurance-slider .elementor-swiper-button-next {
		top: auto !important;
		bottom: -80px !important;
		height: 50px;
		width: 50px;
	}
	.insurance-slider .elementor-swiper-button-next { right: 50% !important; transform: translateX(50%) !important; }
	.insurance-slider .elementor-swiper-button-prev { right: 50% !important; transform: translateX(calc(50% + 60px)) !important; }
}


/* ==========================================================================
   6. .locations-slider  ->  Elementor Pro "Loop Carousel" (.elementor-widget-loop-carousel)
   Old: JetEngine Listing Grid in slider mode. `.item` was the per-post card built from
   regular Elementor widgets (image/heading/icon-list with hand-typed classes .main-box,
   .info, .phone-address, .icon) - those inner classes are untouched by the widget-type
   conversion, only the OWL wrapper (.owl-stage/.owl-item/.item) around them is dead now.
   ========================================================================== */

/* Old: .owl-stage { padding-top:80px } -> Swiper's sliding track is .swiper-wrapper */
.locations-slider .swiper-wrapper { padding-top: 80px !important; }
@media (min-width: 992px) and (max-width: 1036px) { .locations-slider .swiper-wrapper { padding-top: 50px !important; } }
@media (min-width: 768px) and (max-width: 991px)  { .locations-slider .swiper-wrapper { padding-top: 50px !important; } }
@media (min-width: 200px) and (max-width: 767px)  { .locations-slider .swiper-wrapper { padding-top: 30px !important; } }

/* Old: .owl-item { transition:.3s } -> .swiper-slide ; .item { transition:.3s } -> .e-loop-item */
.locations-slider .swiper-slide { transition: 0.3s; }
.locations-slider .e-loop-item { transition: 0.3s; }

/* Old: .item .main-box .info { ... } - inner template classes unchanged, only re-root under .e-loop-item */
.locations-slider .e-loop-item .main-box .info { margin-top: 30px; }
@media (min-width: 992px) and (max-width: 1036px) { .locations-slider .e-loop-item .main-box .info { margin-top: 20px; } }
@media (min-width: 768px) and (max-width: 991px)  { .locations-slider .e-loop-item .main-box .info { margin-top: 20px; } }
@media (min-width: 200px) and (max-width: 767px)  { .locations-slider .e-loop-item .main-box .info { margin-top: 20px; } }

.locations-slider .e-loop-item .main-box .info h4 { margin-bottom: 20px; }
@media (min-width: 992px) and (max-width: 1036px) { .locations-slider .e-loop-item .main-box .info h4 { font-size: 22px !important; margin-bottom: 15px; } }
@media (min-width: 768px) and (max-width: 991px)  { .locations-slider .e-loop-item .main-box .info h4 { font-size: 22px !important; margin-bottom: 15px; } }
@media (min-width: 200px) and (max-width: 767px)  { .locations-slider .e-loop-item .main-box .info h4 { font-size: 20px !important; margin-bottom: 15px; } }

.locations-slider .e-loop-item .main-box .info .phone-address {
	display: inline-flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
}
.locations-slider .e-loop-item .main-box .info .phone-address .icon {
	width: 19px;
	height: auto;
	margin-top: 2px;
}
@media (min-width: 992px) and (max-width: 1036px) { .locations-slider .e-loop-item .main-box .info .phone-address .icon { margin-top: 0px; } }
@media (min-width: 768px) and (max-width: 991px)  { .locations-slider .e-loop-item .main-box .info .phone-address .icon { margin-top: 0px; } }
@media (min-width: 200px) and (max-width: 767px)  { .locations-slider .e-loop-item .main-box .info .phone-address .icon { width: 17px; margin-top: 0px; } }

.locations-slider .e-loop-item .main-box .info .phone-address p a {
	color: #151313;
	font-style: normal;
	font-weight: 400;
	line-height: 0;
	font-size: 20px !important;
}
@media (min-width: 1401px) and (max-width: 1600px) { .locations-slider .e-loop-item .main-box .info .phone-address p a { font-size: 19px !important; } }
@media (min-width: 1200px) and (max-width: 1400px) { .locations-slider .e-loop-item .main-box .info .phone-address p a { font-size: 19px !important; } }
@media (min-width: 1037px) and (max-width: 1199px) { .locations-slider .e-loop-item .main-box .info .phone-address p a { font-size: 19px !important; } }
@media (min-width: 992px) and (max-width: 1036px)  { .locations-slider .e-loop-item .main-box .info .phone-address p a { font-size: 18px !important; } }
@media (min-width: 768px) and (max-width: 991px)   { .locations-slider .e-loop-item .main-box .info .phone-address p a { font-size: 18px !important; } }
@media (min-width: 200px) and (max-width: 767px)   { .locations-slider .e-loop-item .main-box .info .phone-address p a { font-size: 15px !important; } }

/* .locations-slider .main-box img (radius/height/object-fit) and .swiper-pagination{display:none}
   already work unchanged - both selectors already match the new markup. */


/* ==========================================================================
   7. .portfolio-listing  ->  Loop Carousel arrows
   REMOVED. The old Owl offsets (right:400px/480px with a per-breakpoint ladder) were tuned
   to the dead 1639px layout and were already being overridden wholesale downstream. Arrow
   position and styling now live in assets/css/portfolio.css, which sets Loop Carousel's own
   --arrow-* custom properties instead of fighting them with !important.
   ========================================================================== */