/*
 * Final responsive safeguards for the public site.
 *
 * The legacy theme is split across several page-specific style sheets.  Keep
 * these rules last in the cascade so shared content (including CMS-generated
 * HTML) cannot force the viewport wider than the device.
 */

html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

body {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

img,
picture,
video,
canvas,
svg,
iframe,
embed,
object {
	max-width: 100%;
}

img,
picture,
video,
canvas,
svg {
	height: auto;
}

iframe,
embed,
object {
	box-sizing: border-box;
}

form,
fieldset,
input,
select,
textarea,
button {
	box-sizing: border-box;
	max-width: 100%;
}

textarea {
	resize: vertical;
}

.approvedContent {
	box-sizing: border-box;
	max-width: 100%;
}

table {
	max-width: 100%;
}

.mapouter,
.gmap_canvas,
.map-wrap,
.fb-page,
.fb-page > span,
.fb-page iframe {
	max-width: 100% !important;
}

.mapouter,
.gmap_canvas {
	width: 100% !important;
}

.mapouter iframe,
.gmap_canvas iframe {
	width: 100% !important;
}

@media screen and (max-width: 980px) {
	.wrap {
		box-sizing: border-box;
		max-width: 100%;
	}

	/* Keep both navigation controls comfortably tappable. */
	.main-nav .selector,
	.main-nav .selector select,
	#cssmenu,
	#cssmenu #menu-button {
		max-width: 100%;
	}

	.main-nav .selector,
	#cssmenu #menu-button {
		min-height: 44px;
	}

	.main-nav .selector {
		box-sizing: border-box;
		width: 100% !important;
		margin-inline: 0 !important;
	}

	#cssmenu #menu-button,
	#cssmenu ul li a,
	#cssmenu ul ul li a {
		line-height: 1.35;
	}
}

@media screen and (max-width: 830px) {
	header *,
	.main *,
	footer * {
		box-sizing: border-box;
	}

	.main > .wrap,
	.main .wrap > .three-fourth,
	.main .wrap > aside,
	.right-sidebar {
		max-width: 100%;
	}

	.main .wrap > .three-fourth,
	.main .wrap > aside,
	.right-sidebar {
		width: 100% !important;
		margin-inline: 0 !important;
	}

	aside article,
	aside article.default {
		max-width: 100%;
	}

	/* A table may remain wider than the phone, but never the page itself. */
	body table {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	pre,
	code {
		max-width: 100%;
		white-space: pre-wrap;
		word-break: break-word;
	}
}

@media screen and (max-width: 640px) {
	.wrap {
		width: 100% !important;
		margin-inline: 0 !important;
		padding-inline: 14px;
	}

	.travelslogooutediv,
	.travellogos {
		max-width: 100%;
	}

	.travellogos {
		float: none !important;
		width: min(290px, 100%) !important;
		margin-inline: auto !important;
	}

	.cocntent-Img {
		display: block;
		float: none !important;
		width: 100% !important;
		height: auto;
		margin: 0 0 12px !important;
	}

	.contact,
	.approvedContent {
		box-sizing: border-box;
		max-width: 100%;
	}

	.contact .number {
		white-space: normal;
	}

	.galleryouter,
	.galleryouter1,
	.galleryouterIndex,
	.keralatourpackagesOuter,
	.packagedetails,
	.hotelpagetop,
	.hotelV,
	.Hoteldetails,
	.EQform,
	.hotelphotos,
	.hotelenquiryf,
	.hotelmapviewbox,
	.blog-outer,
	.commentbox,
	.container,
	.accordion {
		box-sizing: border-box;
		max-width: 100%;
		margin-inline: 0 !important;
	}

	aside article,
	aside article.default,
	.formbox2,
	.namebox,
	.suggestionbox,
	.three-fourth .post-comment {
		box-sizing: border-box;
		width: 100% !important;
		max-width: 100%;
		float: none !important;
		margin-inline: 0 !important;
	}

	.formbox2 input,
	.formbox2 select,
	.formbox2 textarea,
	.namebox input,
	.suggestionbox textarea,
	.commentbox input,
	.commentbox textarea {
		width: 100% !important;
	}

	.roomDescription,
	.HotelVfacilities,
	.hotelVNumber,
	.mapView {
		box-sizing: border-box;
		max-width: 100%;
	}

	.hotelVClass,
	.hotelVNumber,
	.Bestrate {
		width: 100% !important;
		float: none !important;
		margin-inline: 0 !important;
	}

	.hotelVClass {
		padding: 8px 0;
	}

	.hotelVNumber {
		margin-top: 0 !important;
		margin-bottom: 8px;
	}

	.hotelVNumber h3 {
		padding: 8px 10px;
		text-align: center;
	}

	.Bestrate {
		padding: 4px 0 8px;
		text-align: center;
	}

	body .tabs nav ul {
		flex-wrap: wrap;
	}

	body .tabs nav ul li {
		flex: 1 1 50%;
		min-width: 0;
	}

	body .tabs nav a.icon span {
		display: inline !important;
		font-size: 11px;
		letter-spacing: 0;
	}

	body .content-wrap section {
		box-sizing: border-box;
		max-width: 100%;
		padding-inline: 12px;
	}

	.comments-outer ul {
		display: flex;
		flex-wrap: wrap;
		gap: 6px 12px;
	}

	.comments-outer ul li {
		float: none;
		margin: 0;
	}
}

@media screen and (max-width: 420px) {
	body .tabs nav ul li {
		flex-basis: 100%;
	}

	.roomDescription,
	.HotelVfacilities,
	.hotelVNumber,
	.mapView {
		width: 100% !important;
		float: none !important;
		margin-inline: 0 !important;
	}
}