.white-color {
	color: #fff !important;
}

.phone-field-group {
	display: flex;
}
@media (max-width: 768px) {
	.phone-field-group {
		display: block;
	}

	.phone-field-group-input {
		margin-top: 8px;
	}
}
.select2-container--default .select2-selection--single {
	border-radius: 5px !important;
	/* padding: 5px 10px !important; */
	/* height: 37px !important; */
	padding: 10px 10px !important;
	height: 100% !important;
}
.select2-container--default .select2-selection__rendered {
	line-height: normal !important;
	font-size: 14px !important;
}

/* Change font size of the dropdown options */
.select2-container--default .select2-results__option {
	font-size: 14px !important; /* adjust size as needed */
}

.switch {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 25px;
}
.slider,
.slider::before {
	position: absolute;
	transition: 0.4s;
}
.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}
.slider {
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #8e8e8e;
	border-radius: 34px;
}
.faq-container,
.switch input:checked + .slider {
	/* background-color: #124463; */
}
.slider::before {
	content: "";
	height: 20px;
	width: 22px;
	left: 3px;
	bottom: 3px;
	background-color: #04245c;
	border-radius: 50%;
}
.switch input:checked + .slider::before {
	transform: translateX(22px);
}
.display-none {
	display: none !important;
}
.whatsapp-field-group {
	display: flex;
}

@media (max-width: 500px) {
	.whatsapp-field-group {
		display: block;
	}

	.whatsapp-field-group input {
		margin-top: 10px;
	}
}

.modal-content {
	/* background-color: #224463; */
	padding: 20px;
	margin-top: 50px;
	border-radius: 20px;
}
#bookingModal .modal-content {
	padding: 10px;
	margin-top: 70px;
}
@media screen and (max-width: 768px) {
	.modal-content {
		padding: 10px;
	}
	.modal-content label,
	.modal-content span {
		font-size: 15px !important;
	}
	/* .modal-content input,
	.modal-content .select2 {
		font-size: 10px !important;
	} */
	.modal-content input[type="email"],
	.modal-content input[type="number"],
	.modal-content input[type="text"],
	.modal-content input[type="checkbox"],
	.modal-content select,
	.modal-content .select2,
	.modal-content .select2-selection__rendered,
	.modal-content .select2-results__option {
		font-size: 15px !important;
	}
	.modal-content .row .col-md-12,
	.modal-content .row .col-md-6,
	.modal-content
		.row
		.col-12:not(.d-flex)
		.modal-content
		.row
		.col-12:not(textarea) {
		margin: 2px !important;
	}
	#freeEstimateModal {
		margin-top: 0px !important;
		z-index: 10000 !important;
	}
	#bookingModal {
		margin-top: 0px !important;
		z-index: 10000 !important;
	}
	#bookingForm p {
		margin-bottom: 0px !important;
	}
	#bookingForm .mb-3:not(.phonenewgroup) {
		margin-bottom: 0px !important;
	}
	#bookingForm .modal-body {
		padding: 5px !important;
	}
}
/* ✅ Make modal cross (close) button red */
.modal-content .btn-close {
  filter: invert(31%) sepia(96%) saturate(7483%) hue-rotate(355deg)
    brightness(102%) contrast(108%); /* Red tint */
  opacity: 1; /* make it fully visible */
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.modal-content .btn-close:hover {
  transform: scale(1.2);
  opacity: 0.9;
}
.menu-btn-two {
	border-radius: 8px;
	/* margin-left: 10px; */
	background-color: #ff0000;
	color: white;
	padding: 5px 5px;
}
.menu-btn-two:hover {
	border: 0.5px dotted #ff0000;
	color: #ff0000;
	background-color: white;
	transition: all 0.1s ease-in-out;
}
@media screen and (min-width: 768px) {
	.modal .select2-container {
		width: 100% !important;
	}
}
.rounded-pill {
	border-radius: 5px !important;
}


/* Prevent background scroll */

/* Stop background scroll when modal is open */
body.modal-open {
  overflow: hidden !important;
}

/* Make backdrop blue + blurred */
.modal-backdrop.show {
  background-color: rgba(18, 68, 99, 0.55) !important; /* blue tint */
  backdrop-filter: blur(10px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
  transition: all 0.4s ease-in-out;
}

/* Smooth fade effect */
.modal-backdrop {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.modal-backdrop.show {
  opacity: 1;
}


.message-box-in-modal {
	padding: 10px;
	/* border: 1px solid #ddd !important; */
	border: none !important;
	border-radius: 5px;
	/* margin-bottom: 15px; */
	font-size: 15px;
	background-color: #eaf7ff;
}

#freeEstimateModalLabel {
	text-align: center;
	font-size: 20px;
}


@media (min-width: 576px) {
    .modal-dialog {
        max-width: 671px !important;
        margin: 1.75rem auto;
    }
}