/**
 * Homie Elementor Widgets - Main Stylesheet
 *
 * Adapted from the original static style.css for use within Elementor widget scopes.
 * All section selectors are scoped under .elementor-widget to avoid theme conflicts.
 *
 * @package HomieElementorWidgets
 * @version 1.0.0
 */

/* ==========================================================================
   Common Reset (scoped to plugin widgets)
   ========================================================================== */

.elementor-widget-homie-header .wapper,
.elementor-widget-homie-hero .wapper,
.elementor-widget-homie-services .wapper,
.elementor-widget-homie-reviews .wapper,
.elementor-widget-homie-fulltime .wapper,
.elementor-widget-homie-match .wapper,
.elementor-widget-homie-profiles .wapper,
.elementor-widget-homie-howitworks .wapper,
.elementor-widget-homie-partnership .wapper,
.elementor-widget-homie-cta-footer .wapper {
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
}

@media only screen and (max-width: 1200px) {
	.elementor-widget-homie-header .wapper,
	.elementor-widget-homie-hero .wapper,
	.elementor-widget-homie-services .wapper,
	.elementor-widget-homie-reviews .wapper,
	.elementor-widget-homie-fulltime .wapper,
	.elementor-widget-homie-match .wapper,
	.elementor-widget-homie-profiles .wapper,
	.elementor-widget-homie-howitworks .wapper,
	.elementor-widget-homie-partnership .wapper,
	.elementor-widget-homie-cta-footer .wapper {
		width: 100%;
		padding: 0 10px;
	}
}

/* Shared utility classes */
.disFlex {
	flex-wrap: wrap;
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: flex;
}
.jusBet { justify-content: space-between; }
.jusCet { justify-content: center; }
.jusEnd { justify-content: flex-end; }
.aliTop { align-items: flex-start; }
.aliCet { align-items: center; }
.aliBtm { align-items: flex-end; }

.img { font-size: 0; overflow: hidden; }
img { transition: 0.3s; }
.textCet { text-align: center; }

:root {
	--main-color: #257379;
	--main-color2: #109B04;
	--main-transition: all ease 0.4s;
	--main-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.iTit { font-size: 38px; color: #000; line-height: 1.6; font-weight: bold; }
.iTit2 { font-size: 30px; color: #000; line-height: 1.6; font-weight: bold; }
.iTxt { font-size: 16px; color: #000; line-height: 1.8; }

/* Buttons */
.iBtn a {
	display: inline-block;
	padding: 10px 20px;
	background: var(--main-color);
	border-radius: 5px;
	font-size: 14px;
	color: #fff;
	text-decoration: none;
}
.iBtn a .fa { font-size: 18px; }
.iBtn a .fa img {
	width: 20px;
	vertical-align: middle;
	filter: brightness(0%) contrast(200%) invert(100%) opacity(100%);
}
.iBtn a:hover { opacity: 0.8; }

.iBtn2 a {
	display: inline-block;
	padding: 10px 20px;
	background: transparent;
	border-radius: 5px;
	font-size: 14px;
	color: var(--main-color);
	border: 1px solid var(--main-color);
	text-decoration: none;
}
.iBtn2 a:hover { background: var(--main-color); color: #fff; }
.iBtn2 a .fa img { width: 20px; vertical-align: middle; }

i.fa { font-size: 18px; }
i.fa img { width: 20px; vertical-align: middle; }
.part { transition: 0.3s; }

/* Swiper */
.swiper { width: 100%; height: 100%; position: relative; overflow: hidden; }
.swiper .swiper-slide {
	background: #fff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

/* ==========================================================================
   Header Widget
   ========================================================================== */
.header_a { width: 100%; background: #fff; position: relative; z-index: 999; padding: 20px 0; }
.header_a .warp { height: 80px; padding: 0 15px; }
.logo_a { font-size: 0; line-height: 1; }
.logo_a img { width: auto; max-width: 180px; max-height: 60px; }

@media only screen and (max-width: 980px) {
	.header_a .warp { padding: 0; height: 60px; }
	.logo_a img { max-height: 40px; }
}

/* ==========================================================================
   Hero (index1)
   ========================================================================== */
.index1 { margin: 0; width: 100%; }
.i1Warp { width: 100%; align-items: center; padding: 0 15px; }
.i1Warp .desc { width: 42%; }
.i1Warp .img { width: 50%; }
.i1Warp .img img { width: 100%; }
.i1Warp .iTxt { margin-top: 12px; }
.i1Warp .iBtn { margin-top: 12px; }
.i1Warp .i1Tip { margin-top: 20px; font-size: 14px; color: #333; }
.i1Warp .i1Tip .fa { color: var(--main-color); }

@media only screen and (max-width: 980px) {
	.i1Warp { padding: 0; }
	.i1Warp .desc { width: 100%; }
	.i1Warp .img { width: 100%; margin-top: 20px; }
	.i1Warp .iTit { font-size: 28px; }
	.i1Warp .iBtn a { font-size: 12px; padding: 8px 10px; }
}

/* ==========================================================================
   Services (index2)
   ========================================================================== */
.index2 { padding: 50px 0; }
.i2List { width: 100%; }
.i2List ul li { width: 33.3%; padding: 0 15px; margin-bottom: 20px; }
.i2List .part { display: block; width: 100%; height: 100%; border: 1px solid #ddd; border-radius: 10px; overflow: hidden; }
.i2List .part .img { width: 100%; }
.i2List .part .img img { width: 100%; }
.i2List .part .desc { padding: 20px; display: flex; justify-content: space-between; }
.i2List .part .icon {
	width: 58px; height: 58px;
	display: flex; justify-content: center; align-items: center;
	margin-right: 12px; font-size: 0; line-height: 1;
	border-radius: 50%; overflow: hidden; background: #f8fafc;
}
.i2List .part .icon img { width: 30px; }
.i2List .part .info { flex: 1; }
.i2List .part .tit { font-size: 16px; font-weight: bold; color: #000; }
.i2List .part .txt { font-size: 14px; color: #666; margin-top: 10px; }
.i2List .part:hover { box-shadow: var(--main-shadow); }

@media only screen and (max-width: 980px) {
	.i2List ul li { width: 100%; padding: 0; }
}

/* ==========================================================================
   Reviews (index3)
   ========================================================================== */
.index3 { padding: 50px 0; background: #f8fafb; }
.i3Google {
	display: flex; justify-content: center;
	margin-top: 20px; margin-bottom: 20px;
	align-items: center; font-size: 16px; color: #000;
}
.i3Google .icon { width: 30px; vertical-align: middle; display: inline-block; margin-right: 10px; }
.i3Google .icon img { width: 100%; vertical-align: middle; }
.i3Google .fa-star { color: #f90; margin-right: 5px; display: inline-block; }
.i3Google span { display: block; margin-left: 10px; }

.i3List { width: 100%; margin-top: 35px; }
.i3List .part {
	display: block; width: 100%; height: 100%;
	background: #fff; border: 1px solid #ddd; border-radius: 10px;
	padding: 20px; display: flex; justify-content: space-between;
}
.i3List .part .icon { width: 50px; margin-right: 10px; color: var(--main-color); display: flex; }
.i3List .part .icon i { font-size: 28px; }
.i3List .part .info { flex: 1; }
.i3List .part .txt { font-size: 16px; color: #000; }
.i3List .part .tit { font-size: 16px; color: #000; margin-top: 10px; }
.i3List .part .tit i { width: 20px; height: 1px; background: #000; display: inline-block; vertical-align: middle; margin-right: 10px; }

.i3Link { text-align: center; margin-top: 26px; }
.i3Link a { font-size: 16px; color: var(--main-color); text-decoration: underline; }
.i3Link a i { padding-left: 10px; }
.i3Link a:hover { text-decoration: none; }

/* ==========================================================================
   Full-Time (index4)
   ========================================================================== */
.index4 { margin-top: 50px; padding: 50px 0; background: #f9fbfc; }
.i4Warp { width: 100%; align-items: center; }
.i4Warp .iTit2 { width: 20%; font-size: 32px; }
.i4List { flex: 1; padding: 0 10px; }
.i4List ul { justify-content: space-around; }
.i4List ul li { width: auto; text-align: center; padding: 0 10px; }
.i4List .icon img { width: 32px; }
.i4List .tit { font-size: 16px; margin-top: 10px; line-height: 1.6; color: #000; }

@media only screen and (max-width: 980px) {
	.i4Warp .iTit2 { width: 100%; margin-bottom: 20px; text-align: center; }
	.i4Warp .iBtn2 { width: 100%; text-align: center; margin-top: 20px; }
	.i4List { width: 100%; }
	.i4List ul li { padding: 10px; }
}

/* ==========================================================================
   Match (index5)
   ========================================================================== */
.index5 { padding: 50px 0; }
.index5 .iTxt { margin-top: 12px; }
.i5Warp { width: 100%; margin-top: 35px; }
.i5Warp .warp {
	width: 100%; height: 100%; position: relative;
	border-radius: 10px; padding: 20px; border: 1px solid #ddd;
}
.i5Item1 { width: 35%; }
.i5Item1 .icon {
	width: 58px; height: 58px;
	display: flex; justify-content: center; align-items: center;
	margin-right: 12px; font-size: 0; line-height: 1;
	border-radius: 50%; overflow: hidden; background: #f8fafc;
}
.i5Item1 .icon img { width: 30px; }
.i5Item1 .desc { flex: 1; padding-top: 10px; }
.i5Item1 .tit { font-size: 22px; color: #000; font-weight: bold; }
.i5Item1 .txt { margin-top: 20px; font-size: 16px; color: #000; }
.i5Item1 .txt p {
	margin-bottom: 10px; display: flex;
	justify-content: space-between; align-items: center;
	padding: 10px; background: #f8fafc; border-radius: 5px;
}
.i5Item1 .txt .fa { color: var(--main-color); }

.i5Item2 { width: 50%; }
.i5Item2 .top { width: 100%; }
.i5Item2 .top .img { width: 120px; margin-right: 10px; border-radius: 8px; }
.i5Item2 .top .img img { width: 100%; height: 100%; object-fit: cover; }
.i5Item2 .top .desc { flex: 1; }
.i5Item2 .top .tit { font-size: 22px; color: #000; font-weight: bold; }
.i5Item2 .top .txt { margin-top: 10px; font-size: 16px; color: #000; }
.i5Item2 .top .info { margin-top: 12px; display: flex; flex-wrap: wrap; }
.i5Item2 .top .info .box { margin-top: 10px; display: flex; align-items: center; font-size: 14px; color: #000; width: 100%; }
.i5Item2 .top .info .box:nth-child(1) { width: 220px; }
.i5Item2 .top .info .box:nth-child(2) { width: auto; }
.i5Item2 .top .info .box span { display: block; width: 100px; }
.i5Item2 .top .info .box em { width: 80px; margin-left: 20px; font-style: normal; display: block; color: var(--main-color); }
.i5Item2 .top .info .box em .fa { font-size: 14px; }

.i5Item2 .btm { margin-top: 20px; padding: 20px; background: #f8f9fb; border-radius: 10px; }
.i5Item2 .btm .tit { font-size: 22px; color: #000; font-weight: bold; }
.i5Item2 .btm .txt { font-size: 16px; color: #333; margin-top: 10px; line-height: 1.8; }

.i5Icon { position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; flex: 1; }
.i5Icon .icon {
	display: flex; justify-content: center; align-items: center;
	background: var(--main-color); border-radius: 50%;
	color: #fff; width: 45px; height: 45px;
}
.i5Icon .icon i { font-size: 20px; }
.i5Icon:before,
.i5Icon:after {
	width: 180px; height: 180px; border-radius: 50%;
	border: 1px dashed var(--main-color);
	content: ""; position: absolute;
	top: 50%; transform: translateY(-50%);
}
.i5Icon:before { left: 100px; }
.i5Icon:after { right: 100px; }

@media only screen and (max-width: 980px) {
	.i5Warp { display: block; }
	.i5Item1 { width: 100%; }
	.i5Item2 { width: 100%; }
	.i5Icon { width: 100%; height: 180px; }
	.i5Icon:before,
	.i5Icon:after { left: 50%; top: auto; transform: translateX(-50%); }
	.i5Icon:before { left: 50%; bottom: 100px; }
	.i5Icon:after { right: auto; top: 100px; }
}

@media only screen and (max-width: 1200px) {
	.i5Item2 .top .info .box:nth-child(1) { width: 100%; }
	.i5Icon:before { left: 80px; }
	.i5Icon:after { right: 80px; }
}

/* ==========================================================================
   Profiles (index6)
   ========================================================================== */
.index6 { padding: 50px 0; }
.i6List { width: 100%; margin-top: 35px; position: relative; padding-bottom: 50px; }
.i6List .swiper-slide { height: auto; }
.i6List .part {
	display: block; width: 100%; height: 100%;
	border: 1px solid #ddd; border-radius: 10px;
	padding: 20px; position: relative;
}
.i6List .part .like { position: absolute; top: 20px; right: 20px; color: #666; cursor: pointer; }
.i6List .part .like.on { color: #f00; }
.i6List .part .like.on i:before { content: "\f004"; }
.i6List .part .top { display: flex; justify-content: space-between; }
.i6List .part .top .img { width: 100px; border-radius: 5px; margin-right: 20px; background: #f8f8f8; }
.i6List .part .top .img img { width: 100%; object-fit: cover; }
.i6List .part .top .info { flex: 1; }
.i6List .part .top .tit { font-size: 16px; font-weight: bold; color: #000; }
.i6List .part .top .txt { font-size: 14px; color: #000; margin-top: 10px; }
.i6List .part .tag {
	margin-top: 10px; display: flex; justify-content: space-between;
	flex-wrap: wrap; color: #666; font-size: 14px;
}
.i6List .part .tag span { display: inline-block; }
.i6List .part .more { margin-top: 10px; font-size: 14px; color: #000; }
.i6List .part .more b { font-weight: bold; }
.i6List .part .more .fa { color: var(--main-color); padding-right: 5px; }
.i6List .part .btn { margin-top: 10px; text-align: center; }
.i6List .part .btn a {
	display: inline-block; padding: 10px 20px;
	border: 1px solid var(--main-color); border-radius: 5px;
	font-size: 14px; color: var(--main-color); text-decoration: none;
}
.i6List .part .btn i.fa { padding-right: 5px; color: var(--main-color); display: inline-block; }

.i6Btm { margin-top: 30px; text-align: center; }
.i6Btm .iBtn { margin-top: 10px; }

/* ==========================================================================
   How It Works (index7)
   ========================================================================== */
.index7 { padding: 50px 0; }
.i7Warp { width: 100%; }
.i7Warp .iTit2 { font-size: 28px; }
.i7Warp .left { width: 35%; border-right: 1px solid #ddd; }
.i7Warp .left .txt { font-size: 16px; color: #000; margin-top: 20px; }
.i7Warp .left .txt p { margin-bottom: 10px; padding: 0; }
.i7Warp .left .txt p img { width: 18px; margin-right: 10px; vertical-align: middle; }

.i7Warp .right { width: 65%; padding: 0 5%; }
.i7Warp .right .iTit2 { text-align: center; }
.i7List { margin-top: 25px; }
.i7List ul li { width: 33.3%; position: relative; }
.i7List .part { display: block; text-align: center; padding: 0 5%; }
.i7List .part .numb {
	width: 30px; height: 30px; border-radius: 50%;
	color: #fff; font-size: 16px; text-align: center; line-height: 30px;
	margin: 0 auto; background: var(--main-color);
}
.i7List .part .icon { text-align: center; margin-top: 15px; }
.i7List .part .icon img { width: 40px; }
.i7List .part .tit { margin-top: 10px; font-size: 16px; font-weight: bold; color: #000; }
.i7List .part .txt { font-size: 14px; color: #000; margin-top: 10px; }

@media only screen and (max-width: 980px) {
	.i7Warp .left { width: 100%; border: none; border-bottom: 1px solid #ddd; padding-bottom: 20px; margin-bottom: 20px; }
	.i7Warp .right { width: 100%; padding: 0; }
}

/* ==========================================================================
   Partnership (index8)
   ========================================================================== */
.index8 { padding: 50px 0; border-top: 1px solid #ddd; }
.i8List { width: 100%; margin-top: 20px; }
.i8List ul li { width: 50%; padding: 10px 5%; }
.i8List .part { width: 100%; display: flex; }
.i8List .part .icon { width: 150px; margin-right: 20px; text-align: center; }
.i8List .part .icon img { width: auto; max-width: 100%; }
.i8List .part .desc { flex: 1; }
.i8List .part .tit { font-size: 16px; color: #000; }
.i8List .part .tit b { font-weight: bold; }

@media only screen and (max-width: 980px) {
	.i8List ul li { width: 100%; padding: 10px; }
}

/* ==========================================================================
   CTA Footer
   ========================================================================== */
.footer_a { padding: 20px 0; background: var(--main-color); color: #fff; font-size: 14px; }
.fWarp { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.fWarp .left { flex: 1; }
.fWarp .left .tit { font-size: 16px; font-weight: bold; }
.fWarp .left .txt { margin-top: 10px; }
.fWarp .iBtn a { background: #fff; color: var(--main-color); }
.fWarp .iBtn a .fa img { width: 20px; vertical-align: middle; filter: none; }

@media only screen and (max-width: 980px) {
	.fWarp .left .tit { font-size: 14px; }
	.fWarp .left .txt { font-size: 12px; }
}

/* ==========================================================================
   Elementor Editor specific: ensure proper rendering in editor preview
   ========================================================================== */
.elementor-editor-active .swiper {
	height: auto !important;
	min-height: 100px;
}

/* Fix Swiper slide heights in editor */
.elementor-editor-active .i3List .swiper-slide,
.elementor-editor-active .i6List .swiper-slide {
	height: auto !important;
}