/*=====================
FONTS LINK HERE
======================*/

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
	box-sizing: border-box;
}
/*======================
DEFAULT CSS HERE
========================*/
:root {
	--Inter: "Inter", sans-serif;
}

body {
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 400;
	background: #fafafa;
	color: #333333;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin: 0;
}

a,
a:hover {
	text-decoration: none;
	display: inline-block;
}

ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

::selection {
	color: white;
	background: #ff7675;
}

::-webkit-selection {
	color: white;
	background: #ff7675;
}

::-moz-selection {
	color: white;
	background: #ff7675;
}

.scrolltotop {
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: 50%;
	background: #008b8b;
	text-align: center;
	font-size: 22px;
	color: #ffffff;
	position: fixed;
	right: 30px;
	bottom: 25px;
	display: none;
	animation: lab_top_up 5s linear infinite;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
	z-index: 1;
}

.scrolltotop i {
	color: #ffff;
}

@keyframes lab_top_up {
	0% {
		transform: translateY(-15px);
	}
	50% {
		transform: translateY(0px);
	}
	100% {
		transform: translateY(-15px);
	}
}

.pluse,
.pluse2 {
	position: relative;
	top: 13px;
	left: -8px;
	z-index: -1;
}

.pluse::before,
.pluse2::before {
	width: 40px;
	height: 40px;
}

.pluse::after,
.pluse::before,
.pluse2::after,
.pluse2::before {
	background: #008b8b;
	border-radius: 50%;
	left: 50%;
	top: 50%;
	display: block;
	content: "";
	position: absolute;
	top: 2px;
	left: 0;
}

.pluse::after,
.pluse2::after {
	width: 30px;
	height: 30px;
	background: transparent;
	margin-left: -15px;
	margin-top: -15px;
}

.pluse::before {
	-webkit-animation: pluse_animate 2.5s infinite linear;
	animation: pluse_animate 2.5s infinite linear;
}

.pluse2::before {
	-webkit-animation: pluse_animate 3s infinite linear;
	animation: pluse_animate 3s infinite linear;
}

@keyframes pluse_animate {
	0% {
		opacity: 1;
		-webkit-transform: translate(-50%, -50%) scale(0.3);
		transform: translate(-50%, -50%) scale(0.3);
	}
	100% {
		opacity: 0;
		-webkit-transform: translate(-50%, -50%) scale(2);
		transform: translate(-50%, -50%) scale(2);
	}
}

.container {
	padding-left: 15px;
	padding-right: 15px;
}

/*======================
HEADER CSS HERE
========================*/
.header-area {
	padding-top: 36px;
	padding-bottom: 50px;
	background-color: #0e1624;
}

.header-logo a img {
	max-width: 200px;
}

.desktop-menu-card ul {
	display: flex;
	align-items: center;
	column-gap: 36px;
}

.desktop-menu-card ul li a {
	color: #fff;
	font-size: 14px;
	text-transform: capitalize;
	position: relative;
}

.SMN_effect-14 a {
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

.SMN_effect-14 a:before {
	position: absolute;
	top: 70%;
	left: 50%;
	color: transparent;
	content: "•";
	text-shadow: 0 0 transparent;
	font-size: 13pt;
	-webkit-transition: text-shadow 0.3s, color 0.3s;
	-moz-transition: text-shadow 0.3s, color 0.3s;
	transition: text-shadow 0.3s, color 0.3s;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	transform: translateX(-50%);
	pointer-events: none;
}

.SMN_effect-14 a:hover:before,
.SMN_effect-14 a:focus:before {
	color: #fff;
	text-shadow: 10px 0 #fff, -10px 0 #fff;
}

.login-btn a {
	color: #fff;
	font-size: 14px;
	border-radius: 5px;
	background: #47b86c;
	padding: 9px 43px;
	border: 1px solid #47b86c;
	transition: background 0.3s ease-in-out;
}

.login-btn a:hover {
	background: transparent;
}

.hamburger .line {
	width: 40px;
	height: 3px;
	background-color: #ecf0f1;
	display: block;
	margin: 8px auto;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.hamburger:hover {
	cursor: pointer;
}
.offcanvas-header {
	background-color: #0e1624;
}

#offcanvasRightLabel img {
	width: 100px;
}
.btn-close {
	box-sizing: content-box;
	width: 1em;
	height: 1em;
	padding: 0.25em 0.25em;
	color: #000;
	background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFF' %3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e")
		center/1em auto no-repeat !important;
	border: 0;
	border-radius: 0.25rem;
	opacity: 1 !important;
}

.btn-close:focus {
	box-shadow: none;
}

.offcanvas-body .desktop-menu-card ul {
	flex-direction: column;
	gap: 20px;
	padding-top: 20px;
}

.offcanvas-body .desktop-menu-card ul li a {
	color: #0e1624;
	font-weight: 500;
	font-size: 18px;
}

.offcanvas-body .desktop-menu-card ul li:last-child a {
	color: #fff;
	transition: all 0.3s ease-in-out;
}

.offcanvas-body .desktop-menu-card ul li:last-child a:hover {
	color: #0e1624;
}

/*======================
FOOTER AREA CSS HERE
========================*/
.footer-area {
	background: #0e1624;
}

.footer-top-wrpper {
	padding-top: 100px;
	padding-bottom: 70px;
}

.footer-top-wrpper > h2 {
	color: #fff;
	font-size: 38px;
}

.footer-list h3 {
	color: #47b86c;
	font-size: 28px;
}

.footer-list ul {
	display: flex;
	flex-direction: column;
	row-gap: 15px;
	padding-top: 40px;
}

.footer-list ul li a {
	color: #fff;
	font-size: 20px;
}

.contact-info li {
	display: flex;
	align-items: center;
}

.contact-info li span:first-child {
	width: 50px;
	display: inline-block;
	margin-right: 5px;
}
.contact-info li span:last-child {
	width: calc(100% - 50px);
}

.contact-info li i {
	color: #47b86c;
	font-size: 30px;
}

.contact-info li span {
	color: #fff;
	font-size: 20px;
	line-break: anywhere;
}

.contact-info {
	padding-right: 113px;
}

.footer-top-wrpper .row {
	margin-top: 60px;
}

.footer-bottom-wrpper {
	padding-bottom: 40px;
}

.footer-bottom-wrpper p {
	color: #fff;
	text-align: center;
	font-size: 18px;
}

/*======================
Login Form AREA CSS HERE
========================*/
.login-form-area {
	padding-top: 100px;
	padding-bottom: 113px;
}

.login-form-wrpper form {
	max-width: 400px;
	margin: auto;
}

.login-form-wrpper h2 {
	color: #000;
	font-family: var(--Inter);
	font-size: 34.4px;
	text-align: center;
	margin-bottom: 60px;
}

.login-form-wrpper form > label {
	display: block;
	color: #010101;
	font-family: var(--Inter);
	font-size: 16.4px;
	margin-bottom: 18px;
}

.login-form-wrpper form input {
	border-radius: 6px;
	border: 1px solid #e0e0e0;
	background: #fff;
	padding-left: 21px;
	padding-top: 16px;
	padding-bottom: 11px;
	color: #010101;
	font-family: var(--Inter);
	font-size: 16.4px;
	width: 100%;
	margin-bottom: 20px;
}

.login-form-wrpper form select {
	border-radius: 6px;
	border: 1px solid #e0e0e0;
	background: #fff;
	padding-left: 21px;
	padding-top: 14px;
	padding-bottom: 14px;
	color: #010101;
	font-family: var(--Inter);
	font-size: 16.4px;
	width: 100%;
	margin-bottom: 20px;
}

.login-form-wrpper form input:focus {
	outline: none;
}

.custom-checkbox {
	display: flex;
	align-items: center;
}

.custom-checkbox input {
	display: none;
}

.checkmark {
	width: 20px;
	height: 20px;
	background-color: white;
	border: 2px solid #0266d6;
	border-radius: 4px;
	margin-right: 10px;
	position: relative;
	display: inline-flex;
}

.custom-checkbox input:checked + .checkmark {
	background-color: #0266d6;
}

.checkmark::after {
	content: "";
	position: absolute;
	display: none;
}

.custom-checkbox input:checked + .checkmark::after {
	display: block;
}

.checkmark::after {
	left: 5px;
	top: 2px;
	width: 6px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.custom-checkbox a {
	margin-left: 5px;
}

.confirm-box {
	margin-top: 25px;
}

.signup-btn button,
.otp-submit-btn button {
	color: #fff;
	text-align: center;
	font-family: var(--Inter);
	font-size: 18.4px;
	border-radius: 12px;
	background: #0eaf52;
	padding: 12px 0;
	width: 100%;
	border: 2px solid #0eaf52;
	transition: all 0.3s ease-in-out;
	margin-top: 63px;
}

.otp-submit-btn button {
	margin-top: 20px;
}

.signup-btn button:hover,
.otp-submit-btn button:hover {
	background: transparent;
	color: #0eaf52;
}

.login-form-wrpper form p {
	color: #010101;
	text-align: center;
	font-family: var(--Inter);
	font-size: 16.4px;
	margin-top: 42px;
}

.login-form-wrpper form p a {
	color: #3886de;
}

.login-form-wrpper small {
	color: #010101;
	font-family: var(--Inter);
	font-size: 16.4px;
	margin-top: 5px;
	display: block;
}

/*======================
TERMS CONDITION PAGE CSS HERE
========================*/
.terms-condition-area {
	padding: 85px 0;
}

.terms-condition-wrpper h2 {
	color: #000;
	font-size: 40px;
	margin-bottom: 15px;
}

.terms-condition-wrpper p,
.terms-condition-list {
	color: #000;
	font-size: 24px;
}

.terms-condition-list {
	padding-top: 15px;
}

.terms-condition-list ul {
	padding-top: 10px;
	list-style: disc;
	padding-left: 40px;
}

.terms-condition-list ul li {
	font-size: 20px;
}

/*======================
ARABIC BANNER PAGE CSS HERE
========================*/
.arabic-banner-area {
	padding-top: 80px;
	padding-bottom: 147px;
}

.banner-img img {
	display: block;
	margin: auto;
	border-radius: 35px;
	width: 100%;
	max-width: 840px;
}

.arabic-banner-cntn {
	padding-top: 25px;
}

.arabic-banner-cntn p {
	color: #000;
	font-size: 24px;
	max-width: 975px;
	margin-left: auto;
	margin-right: 0;
	margin-top: 15px;
}

/*======================
ARABIC BANNER PAGE CSS HERE
========================*/
.apartemant-desc-page {
	padding-top: 46px;
	padding-bottom: 191px;
}

.apartmenet-desc ul {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	row-gap: 15px;
}

.apartmenet-desc ul li {
	width: 50%;
	display: flex;
	align-items: center;
	font-size: 18px;
	gap: 15px;
}

.apartmenet-desc ul li span:first-child {
	color: #47b86c;
}

.apartmenet-desc ul li span:last-child {
	color: #c4c4c4;
}

.owner-info-left {
	padding: 0 23px;
}

.border-bottom {
	padding: 18px 0 29px;
	border-bottom: 2px solid #e7e7e7;
}

.owner-info-left h4 {
	color: #47b86c;
	font-size: 18px;
	margin-bottom: 7px;
}

.owner-info-left p {
	display: flex;
	align-items: center;
	column-gap: 14px;
}

.owner-info-left p span {
	color: #cfcfcf;
	font-size: 14px;
	font-weight: 500;
}

.owner-info-right {
	display: flex;
	column-gap: 23px;
}

.owner-info-right h3 {
	color: #47b86c;
	font-size: 18px;
}

.owner-info-right p {
	color: #d9d9d9;
	font-size: 18px;
}

.expence {
	color: #47b86c;
	font-size: 24px;
	padding-top: 18px;
	padding-bottom: 22px;
}

.contact-buttons-row {
	padding: 16px 38px;
	border-top: 2px solid #e7e7e7;
	border-bottom: 2px solid #e7e7e7;
	margin-left: 23px;
	margin-right: 23px;
}

.contact-btns {
	padding: 0 23px;
}

.contact-buttons-row button {
	height: 71px;
	padding: 0 30px 0 17px;
	border-radius: 7px;
	background: #0e1826;
	color: #47b86c;
	font-size: 24px;
	border: 2px solid #0e1826;
	transition: background 0.3s ease-in-out;
}

.contact-buttons-row button:hover {
	background: transparent;
}

.contact-buttons-row button:nth-child(2) {
	padding-top: 18px;
	padding-bottom: 15px;
}

/*======================
ADD ROOMS PAGE CSS HERE
========================*/
#add-rooms {
	padding-top: 69px;
	padding-bottom: 99px;
	display: flex;
}

.admin-menu-wrpper {
	height: 100dvh;
	width: 331px;
	border: 1px solid #d7d7d7;
	border-left: none;
	padding-left: 56px;
	padding-top: 91px;
}

.all-rooms-card {
	width: calc(100% - 331px);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: max-content;
	column-gap: 36px;
	row-gap: 60px;
	padding: 0 58px;
}

.admin-menu-wrpper ul {
	display: flex;
	flex-direction: column;
	row-gap: 15px;
	height: 100%;
	padding-bottom: 50px;
}

.admin-menu-wrpper ul li a {
	color: #7a7a7a;
	font-family: Helvetica;
	font-size: 18px;
	display: inline-flex;
	align-items: center;
	gap: 17px;
	padding: 15px 34px 14px 24px;
	border-radius: 5px;
	transition: all 0.3s ease-in-out;
}

.admin-menu-wrpper ul li a svg path {
	transition: all 0.3s ease-in-out;
}

.admin-menu-wrpper ul li a:hover {
	background-color: #47b86c;
	color: #ffffff;
}

.admin-menu-wrpper ul li a:hover svg path {
	stroke: #ffffff;
}

.admin-menu-wrpper ul li:last-child a {
	color: #ff342d;
}

.admin-menu-wrpper ul li:last-child a:hover {
	background: #ff342d;
	color: #fff;
}

#admin-item-active a,
#admin-item-active a svg path {
	background-color: #47b86c;
	color: #ffffff;
	stroke: #fff;
}

.admin-menu-wrpper ul li:nth-child(4) {
	flex-grow: 1;
}

.single-room-dtls {
	border-radius: 4.105px;
	background: #0e1624;
	box-shadow: 0 3.284px 3.284px 0 rgba(0, 0, 0, 0.25);
	height: max-content;
}

.room-thumbnail img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
}

.room-desc {
	padding-top: 14px;
	padding-left: 16px;
	padding-right: 17px;
}

.room-desc h4 {
	color: #fff;
	font-size: 14.777px;
}

.room-desc p {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #cfcfcf;
	font-size: 11.493px;
	font-weight: 500;
	padding-bottom: 21px;
	border-bottom: 1.7px solid #e7e7e7;
}

.room-desc h3 {
	color: #47b86c;
	font-size: 19.703px;
	padding-top: 14px;
	padding-bottom: 16px;
}

.add-room-floating-btn {
	position: fixed;
	right: 60px;
	bottom: 60px;
	background-color: #47b86c;
	color: #ffffff;
	font-family: Helvetica, sans-serif;
	font-size: 18px;
	font-weight: 600;
	padding: 14px 36px;
	border-radius: 6px;
	text-decoration: none;
	box-shadow: 0 15px 30px rgba(71, 184, 108, 0.35);
	transition: background-color 0.3s ease, transform 0.2s ease;
}

.add-room-floating-btn:hover {
	background-color: #3ca35d;
	color: #ffffff;
	transform: translateY(-2px);
}

.photo-row small {
	color: #1e1014;
	font-family: Helvetica;
}

.photo-row {
	margin-bottom: 8px;
}

.rooms-photo-row {
	margin-bottom: 24px;
}

.rooms-photo-controls {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.rooms-photo-preview {
	display: flex;
	flex-wrap: nowrap;
	gap: 12px;
	padding: 0;
	margin: 0;
	list-style: none;
	overflow-x: auto;
	max-width: 100%;
}

.rooms-photo-preview li {
	width: 120px;
	height: 120px;
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fafafa;
	color: #7a7a7a;
	font-size: 14px;
	text-align: center;
	padding: 8px;
	flex: 0 0 auto;
}

.rooms-photo-preview li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rooms-photo-actions {
	display: flex;
	flex-direction: row;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}

.rooms-photo-placeholder {
	font-style: italic;
}

.profile-photo-controls {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	row-gap: 12px;
	column-gap: 18px;
	list-style: none;
	padding-left: 0;
}

.profile-photo-controls img {
	width: 120px;
	height: 120px;
	object-fit: cover;
	border-radius: 16px;
	border: 1px solid #d7d7d7;
}

.upload-photo-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.upload-photo-link {
	color: #47b86c;
	font-family: Helvetica;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.upload-photo-link:hover {
	color: #3ca35d;
}

.upload-photo-hint {
	color: #7a7a7a;
	font-size: 14px;
}

.selected-images-list {
	margin-top: 8px;
	padding-left: 18px;
	list-style: disc;
	color: #473d3e;
}

.selected-images-list li {
	font-size: 14px;
}

.photo-action-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #47b86c;
	font-family: Helvetica;
	font-size: 16px;
	font-weight: 600;
	width: 199px;
	height: 48px;
	border: 1px solid #47b86c;
	background: transparent;
	border-radius: 8px;
	cursor: pointer;
	text-decoration: none;
}

.photo-action-btn.delete {
	color: #473d3e;
	width: 100px;
	background: #f8f8f8;
	border: none;
}

.photo-action-btn--disabled,
.photo-action-btn--disabled:hover {
	opacity: 0.5;
	cursor: not-allowed;
}

.room-card-link {
	display: block;
	color: inherit;
	text-decoration: none;
	position: relative;
}

.room-card-link .single-room-dtls {
	transition: box-shadow 0.2s ease;
}

.room-card-link:hover {
	z-index: 2;
}

.room-card-link:hover .single-room-dtls {
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.profile-alert {
	border-radius: 8px;
}

.property-details form .action-title-btn p {
	color: #1e1014;
	font-family: Helvetica;
}

.property-details form .action-title-btn button {
	width: 74px;
	height: 33px;
	border: 1px solid #d7d7d7;
	border-radius: 15px;
	background: transparent;
}

.new-proterty-add,
.chat-box-wrpper {
	width: calc(100% - 331px);
	padding: 0 58px;
}

.add-new-room-form {
	padding-bottom: 16px;
}

.input-row {
	display: flex;
	justify-content: space-between;
	column-gap: 10px;
	row-gap: 10px;
	margin-bottom: 10px;
}

.input-field {
	width: calc(50% - 5px);
}

.input-field label {
	color: #7a7a7a;
	font-family: Helvetica;
	font-size: 14px;
	display: block;
	margin-bottom: 21px;
}

.input-field input {
	color: #0f0609;
	font-family: Helvetica;
	width: 100%;
	padding: 10px 14px;
	background: #fff;
	border: 1px solid #7a7a7a;
	border-radius: 8px;
	outline: none;
	min-height: 42px;
}

.input-field input::placeholder {
	color: #0f0609;
}

.input-field select {
	color: #0f0609;
	font-family: Helvetica;
	width: 100%;
	padding: 10px 14px;
	background-color: #fff;
	border: 1px solid #7a7a7a;
	border-radius: 8px;
	outline: none;
	min-height: 42px;
}

.form-select:focus {
	border-color: #7a7a7a;
	box-shadow: none;
}

.property-details {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.property-details form {
	padding-top: 14px;
	display: flex;
	flex-direction: column;
	row-gap: 10px;
}

.checkbox-field {
	display: flex;
	align-items: center;
	min-height: 42px;
}

.cancel-btn {
	color: #ff342d;
	font-family: Helvetica;
	width: 166px;
	height: 47px;
	flex-shrink: 0;
	border: 1px solid #ff342d;
	border-radius: 8px;
	background: transparent;
	margin-top: 40px;
}

.submit-btn {
	color: #fff;
	font-family: Helvetica;
	width: 166px;
	height: 47px;
	flex-shrink: 0;
	border: 1px solid #0eaf52;
	border-radius: 8px;
	background: #0eaf52;
	margin-left: 11px;
	margin-top: 40px;
}

#confirm-box {
	margin-top: 10px;
}

#custom-checkbox {
	margin-bottom: 0;
	display: flex;
}

.cancel-btn.delete-accoutn {
	margin-top: 20px;
}

.chat-box-wrpper {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 16px;
}

.chat-list {
	border-radius: 16px;
	background: #fff;
	padding-top: 32px;
}

.chat-list h3 {
	color: #262626;
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 16px;
}

.single-chat {
	padding: 10px 0;
	display: flex;
	column-gap: 16px;
	padding-left: 40px;
}

.person-info h2 {
	color: #262626;
	font-size: 16px;
	font-weight: 500;
	position: relative;
	margin-top: 5px;
}

.person-info h2::after {
	content: "";
	display: block;
	clear: both;
	position: absolute;
	width: 6px;
	height: 6px;
	background-color: #536eda;
	border-radius: 50%;
	right: -20px;
	top: 50%;
	transform: translateY(-50%);
}

.person-img {
	position: relative;
}

.message-count {
	position: absolute;
	top: 0;
	right: 0;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: #fd5c5c;
	color: #fff;
	font-size: 10px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
}

#active-single-chat {
	position: relative;
	background-color: #edeff7;
}

#active-single-chat::before {
	content: "";
	display: block;
	clear: both;
	position: absolute;
	width: 4px;
	height: 100%;
	background-color: #536eda;
	border-radius: 8px;
	left: 0;
	top: 0;
}

.chat-inbox {
	padding: 107px 33px 30px;
	border-radius: 16px;
	border: 1px solid #ebebeb;
	background: #fff;
	height: max-content;
}

.chat-inbox ul li {
	display: flex;
	align-items: flex-end;
	gap: 16px;
}

.chat-inbox ul li img {
	width: 32px;
}

.chat-inbox ul li span {
	color: #262626;
	font-size: 14px;
}

.chat-inbox ul small {
	padding-bottom: 90px;
	display: block;
	border-bottom: 1px solid #b5b5b5;
	position: relative;
}

.chat-inbox ul small span {
	position: absolute;
	bottom: -15px;
	left: 50%;
	transform: translateX(-50%);
	color: #b5b5b5;
	text-align: center;
	font-size: 14px;
	padding: 10px 30px;
	background-color: #fff;
}

.type-message {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 265px;
}

.type-message input {
	width: calc(100% - 65px);
	border-radius: 48px;
	opacity: 0.88;
	background: #f7f7f7;
	color: #727272;
	font-size: 12px;
	padding: 17px 20px;
	border: none;
	outline: none;
}

.type-message button {
	width: 52.616px;
	height: 52.616px;
	border-radius: 50%;
	background: #3d63f9;
	border: none;
}

/*=========================
LANDING PAGE 2 STYLE HERE
==========================*/
.search-filter-area {
	padding-top: 75px;
	padding-bottom: 93px;
}

.search-filter-wrpper {
	max-width: 1170px;
	border-radius: 0 11px 11px 11px;
	background: #fff;
	margin: auto;
	padding: 47px 84px 34px 31px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 36px;
	row-gap: 19px;
}

.single-options {
	border-radius: 7px;
	background: #0e1826;
	padding-right: 30px;
	padding-left: 19px;
	height: 71px;
	display: flex;
	align-items: center;
	column-gap: 18px;
	width: 31%;
}

.single-options select {
	background-color: transparent;
	border: none;
	outline: none;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	background-image: url(images/caret-down-green.png);
	padding: 0;
}

.single-options select option {
	color: #000;
	padding: 15px !important;
}

.search-icon {
	width: 86px;
	height: 71px;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 7px;
	background: #47b86c;
	cursor: pointer;
}

.landingpage-all-items-row {
	padding-bottom: 109px;
}

.landingpage-all-items-row .row {
	row-gap: 57px;
}

/*=========================
Roommates List Styling
=========================*/
.roommate-list-item {
	border-radius: 11px;
	border: 1px solid #e7e7e7;
	background: #fff;
	padding: 20px 28px;
	column-gap: 24px;
	row-gap: 12px;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.roommate-list-item:hover {
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.roommate-avatar img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.roommate-info h5 {
	color: #0e1624;
	font-size: 18px;
	margin-bottom: 4px;
}

.roommate-info p {
	color: #7a7a7a;
	font-size: 14px;
	display: flex;
	align-items: center;
	column-gap: 6px;
}

.roommate-info img {
	width: 16px;
	height: 16px;
}

.roommate-price {
	min-width: 160px;
}

.roommate-price strong {
	color: #47b86c;
	font-size: 18px;
	display: block;
}

.roommate-price p {
	color: #7a7a7a;
	font-size: 14px;
	margin-top: 4px;
}

.hero-area {
	background: #0e1624;
}

.hero-image-card img {
	max-width: 100%;
}

.hero-content {
	padding-top: 50px;
}

.hero-content h3 {
	color: #fff;
	font-size: 18px;
	text-transform: uppercase;
}

.hero-content h1 {
	color: #fff;
	font-size: 54px;
	margin-top: 23px;
	margin-bottom: 15px;
	font-weight: 400;
	padding-right: 90px;
}

.hero-content p {
	color: #fff;
	font-size: 18px;
	padding-right: 50px;
}

.find-roommate-row {
	max-width: 1069px;
	padding: 47px 41px 47px 31px;
	left: 0;
	bottom: 0;
	flex-shrink: 0;
	border-radius: 0 11px 11px 11px;
	background: #fff;
	transform: translateY(-80px) !important;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.find-roommate-row button {
	position: absolute;
	left: 0;
	top: -61px;
	color: #47b86c;
	font-size: 16px;
	width: 272px;
	height: 61px;
	border: none;
	border-radius: 11px 11px 0 0;
	border-bottom: 1px solid #e7e7e7;
	background: #fff;
	text-align: left;
	padding-left: 31px;
}

.find-roommate-row .single-find-method {
	flex: 1 1 180px;
	height: 71px;
	border-radius: 7px;
	background: #0e1826;
	padding: 0 19px;
	display: flex;
	align-items: center;
	gap: 16px;
}

.find-roommate-row .single-find-method.keyword-field {
	flex-basis: 295px;
}

.find-roommate-row .single-find-method.select-field {
	flex-basis: 220px;
}

.find-roommate-row .single-find-method.city-field,
.find-roommate-row .single-find-method.district-field {
	flex: 1 1 calc((100% - 114px) / 2);
	min-width: 220px;
}

.find-roommate-row .single-find-method.advanced-field {
	flex: 0 0 156px;
	background: transparent;
	padding: 0;
	gap: 12px;
}

.find-roommate-row .single-find-method.search-icon {
	flex: 0 0 86px;
	height: 71px;
	border-radius: 7px;
	background: #47b86c;
	justify-content: center;
}

.find-roommate-row .single-find-method input {
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	background: transparent;
	border: none;
	outline: none;
}

.find-roommate-row .single-find-method input::placeholder {
	color: #fff;
}

.find-roommate-row .single-find-method select {
	background-color: transparent;
	background-image: url(images/caret-down-green.png);
	border: none;
	outline: none;
	color: #fff;
}

.find-roommate-row .single-find-method select option {
	color: #000;
}

.find-roommate-row .single-find-method.advanced-field span {
	color: #0e1624;
	font-size: 18px;
}

/*=========================
Browse Room CSS HERE
==========================*/
.common-design {
	padding-top: 38px;
	padding-bottom: 52px;
}
.area-title h2 {
	color: #47b86c;
	text-align: center;
	font-size: 38px;
	font-weight: 400;
	margin-bottom: 38px;
}

.area-btn a {
	color: #fff;
	font-size: 24px;
	width: 370px;
	max-width: 100%;
	height: 81px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	background: #47b86c;
	border: 2px solid #47b86c;
	transition: all 0.3s ease-in-out;
	margin: auto;
	margin-top: 89px;
}

.area-btn a:hover {
	background: transparent;
	color: #47b86c;
}

.single-city {
	position: relative;
}

.single-city img {
	width: 100%;
}

.city-location-tracker {
	height: 68px;
	background: linear-gradient(0deg, #47b86c 0%, #47b86c 100%);
	display: flex;
	align-items: center;
	gap: 16px;
	padding-left: 22px;
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
}

.city-location-tracker span {
	color: #fafafa;
	font-size: 19.333px;
	font-weight: 500;
}

.single-review {
	padding: 54px 18px 46px 18px;
	border-radius: 9px;
	background: #0e1624;
}

.single-review > p {
	color: #fff;
	text-align: center;
	font-size: 14px;
	margin-bottom: 28px;
}

.review-provider-info {
	display: flex;
	gap: 16px;
}

.client-img {
	width: 98px;
	height: 98px;
	border-radius: 50%;
	background-color: #c4c4c4;
}

.client-name-designation h3 {
	color: #47b86c;
	font-size: 24px;
	font-weight: 400;
}

.client-name-designation p {
	color: #cfcfcf;
	font-size: 12px;
}

.swiper {
	width: 100%;
}

/*=========================
Get Touch Area CSS HERE
==========================*/
.get-touch-area {
	padding-top: 83px;
}

.get-touch-wrpper {
	padding: 30px 61px 35px 50px;
	border-radius: 10px;
	background: #47b86c;
}

.get-touch-cnnt h3 {
	color: #fff;
	font-size: 48px;
	font-weight: 400;
	padding-right: 50px;
	margin-bottom: 15px;
}

.get-touch-cnnt p {
	color: #0e1624;
	font-size: 18px;
	font-weight: 400;
}

.contact-from input,
.contact-from textarea {
	color: #0e1624;
	font-size: 16px;
	font-weight: 500;
	border-radius: 6px;
	background: #fff;
	padding: 12px 24px;
	border: none;
	outline: none;
	width: 100%;
}

.contact-from input::placeholder,
.contact-from textarea::placeholder {
	color: #0e1624;
}

.contact-from button {
	color: #fff;
	font-size: 16px;
	border-radius: 6px;
	border: 2px solid #fff;
	width: 100%;
	background: transparent;
	height: 48px;
	transition: all 0.3s ease-in-out;
}

.contact-from form {
	display: flex;
	flex-direction: column;
	row-gap: 25px;
}

.contact-from button:hover,
.download-cntn button:hover {
	box-shadow: 0 0 10px #000;
	background: #fff;
	color: #47b86c;
}

/*=========================
Download App Area CSS HERE
==========================*/
.download-app-area {
	padding-top: 106px;
	padding-bottom: 114px;
}

.download-app-wrpper {
	padding-top: 12px;
	padding-right: 61px;
	padding-left: 91px;
	border-radius: 10px;
	background: #47b86c;
}

.mobile-hand-img img {
	max-width: 100%;
	display: block;
	margin: auto;
}

.download-cntn {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}

.download-cntn p {
	color: #fff;
	font-size: 24px;
}

.download-cntn button {
	width: 350px;
	max-width: 100%;
	height: 48px;
	border-radius: 6px;
	border: 2px solid #fff;
	color: #fff;
	text-align: center;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	background: transparent;
	transition: all 0.3s ease-in-out;
}

.footer-list ul li,
.footer-list ul li a {
	transition: all 0.3s ease-in-out;
}

.footer-list ul li:hover {
	transform: translateX(10px);
}

.footer-list ul li:hover a,
.footer-list ul li:hover span {
	color: #0eaf52;
}
a.room-card-link:hover{
    display: block !important;
}